ying
(@yingscarlett)
Hi there,
Are you referring to the background image of the hero section?
If so, it doesn’t seem to be set to medium size, can you show me a screenshot of the background image setting in the GB container?
hi,
no, if you look at the page speed report it is the logo in the hero section, and the two images below that.
they are definitely set to medium and render as medium in all browsers I’ve tested.
but page speed / lighthouse always shows the warning to properly size images, which it’s saying is the medium large size. I’m lost!
j
ying
(@yingscarlett)
High resolution screens of moder mobile devices requests image with 2x resolution, which means, a 350px width mobile device requests images with 700px width image.
So the 3 images are loading the 768px version on mobile, the report is correct.
Try using this PHP snippet to ask the browser to load 300px width images on mobile:
function db_modify_srcset_sizes($sizes, $size) {
$sizes = '(max-width: 500px) 150px, (min-width: 501px) 300px, (min-width: 769px) 1024px, 100vw';
return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);
HI, this seems to have worked, thank you!
I do understand about retina screens, but I have been following google’s own guidelines on this. I guess it is somehwat misleading then? or is my information out of date? I usually test at 480px wide for mobile (or smaller). realistically then, I should be testing the page at arouns 800px wide?
there are a lot of conflicting answers about this. its hard to know exactly what I should set to satisfy pagespeed / core web vitals, if im having to alter the SRC set each time to be half of what it actually is. madness really.
ying
(@yingscarlett)
Just remember that mobile devices actually requests 2 x resolution images.
In my code, I asked the browser to load 150px images on screens that are narrower than 500px, so on the actual mobile device, the 300px width image will be loaded.
i see well that makes sense.
either way your filter does a good job. I’ll keep that handy. Obviously at larger sizes I can adjust the slot size as needed. I do understand the code, how it works with src set and page speed insights in the real world is another thing entirely.
on other site builds in fact I don’t use the sizes parameter and set custom image sizes instead and use those, setting each one for specific widths as the default wordpress is so out of touch with reality. This build is a bit too simple for such work, however, so this solution is perfect, thanks again.
j
