- This topic has 20 replies, 3 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
October 24, 2020 at 9:01 am #1502552Howard
This has been a bit confusing for me as well.
I have resized my featured image according to the width of my gp container on desktop.
Ive varied from originally a 975 pixel width to most recently- up to 1050- 1100 width.Apparently, the uploaded compressed image when going to recent post thumbnails gets messed up according to Page Speed insights – where I get the following:
https://developers.google.com/speed/pagespeed/insights/
https://www.thesoundadvocate.com/
Page speed test
More.
URL
Resource Size
Potential Savings…09/Wyred-4-Sound-front-min.jpg(cdn.thesoundadvocate.com)
56.1 KiB
21 KiB…10/Graham-LS5-9-feature-image.jpg(cdn.thesoundadvocate.com)
45.8 KiB
18.8 KiB…10/Mojo-Audi….jpg(cdn.thesoundadvocate.com)
26.2 KiB
10.8 KiB…10/Starkrimson-1024×364.jpg(cdn.thesoundadvocate.com)
24.9 KiB
10.1 KiB…09/Vivid-Aud….jpg(cdn.thesoundadvocate.com)
25 KiB
9.3How can this be fixed??
October 24, 2020 at 10:28 am #1502642DavidStaffCustomer SupportHi there,
Google is flagging those images as they are being output at 995px for a mobile sized screen.
The flag gets raised if it calculates a smaller image could save more than 4 kibytes.You can set a different media size attachment to be displayed for your Archives in Customizer > Layout > Blog –> Featured Images >>> Archives.
Now for the conundrum.
On Desktop your images are being displayed at around 480px.
On Mobile ( plus size ) they’re about 350px.
But on Portrait Tablet they are at their largest of around 700px.So the optimum size image to select is the
Medium Large
size that WP generates which is 768px.
This means you get an image that fits tablet, and provides a little file size saving.It may not remove the Opportunity google is raising but its an improvement.
Now for the second conundrum. Retina Screens like to have an image that is x2 the size it is displayed at – so your current size is actually the one that most browsers will try to request. And as this largest image is what the single post will display, you can save your users browser from making a whole new request by leaving it as it is.
October 24, 2020 at 11:08 am #1502677HowardWow… this stuff gets confusing.
So Basically, if I Just look at your last paragraph- you say that I should arguably, keep my FEATURED image for blog post page at my current size? Would that be say 1100 by 500 -600 height, Or 1200 width tops? Or anywhere in between those 2 ??
ThanksOctober 25, 2020 at 5:31 am #1503223DavidStaffCustomer SupportTotally 🙂
Heres what i would apply:
1. Single Post – the maximum image width required is 994px. This takes into account the width of the main content and the padding applied to it. So you could make all of your image widths of that size.
Then in Customizer > Layout > Blog –> Featured Images >>> Posts select the Media Attachment size:
Full
2. Archive Post images – max size is around 768px width which is when they are viewed on a Portrait Tablet.
In Customizer > Layout > Blog –> Featured Images >>> Archives select the Media Attachment size:
Medium Large
This means your images will all fill the space provided on all devices.
On Mobile ( which most are Retina ) it will be loading an image this roughly twice the size thats required. So google will still raise that opportunity but that can be ignored.October 25, 2020 at 5:53 am #1503242HowardThanks so much David; I will try this out exactly in my next post…. will let you know!✌️
October 25, 2020 at 6:25 am #1503263DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.