Too large intrinsic thumbnails on mobile
-
Hi,
On mobile all thumbnails are loading too big intrinsic size on every page. On desktop all is ok.
f.i.:
on desktop thumbnails size is 275×275. rendered 275×275, intrinsic 280×280 because src and srcset is 280×280
on mobile thumbnails size is 188×188. rendered 188×188, intrinsic 580×580 but src and srcset is 280×280
So page size and loading time is way bigger then needed on mobile because it loads 580×580please check video:
https://www.loom.com/share/eec6c9b353da436ca5210188cacf00c6I already tried regenerate all thumbnails, changed theme, disabled all plugin etc.
The page I need help with: [log in to see the link]
-
Hi I also had this problem, and maybe this could help
The thing is that it is not a bug. It actually works as it intend to do and that is to serve the best image according to the specific screen where the image is displayed.
I do hope that I explain this correct, if I’m not please correct me.
I guess you just like me wanted to improve the mobile speed and perhaps you run google page speed insight to find that it complain about image sizes on mobil. You dig deeper as you did and found that on mobile it actually downloads larger images than on desktop. Why is that? The WordPress functions to display the thumbnail uses srcset to serve the best possible image depending on screen size. So far so good. But when determine screen size it also look at the dpi, screen resolution. So if the screen is a Retina screen it doubles the width and instead it will pick a thumbnail double the size to be suitable for the retina screen. And with the newest iPhone that has even higher resolutions it will pick even larger images. But serving large images to mobile with high resolution screens will impact the page speed on mobiles and if you want to make a compromise you need a fix. In the code that you examine in the browser you see following: sizes=”(max-width: 280px) 100vw, 280px”. What it says is that if the screen max-width is 280px use an image with a width of 100% of the screen else use 280px. Now a retina screen is double the size so the comparison will be instead, if max width is 560px pick an image with a width of 100% of the screen and ofc it will pick an image that is larger than 280px. This is how you get larger images on mobile than on desktop. To really optimize this well to suite your site you need to learn about srcset and how it works. But just to help you with your problem to simply reduce images size on mobile you can put following code in your functions.php that will change the size attribute.
function my_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
$attr[‘sizes’] = ‘(max-width: 280px) 50vw, 280px’;
return $attr;
}
add_filter( ‘wp_get_attachment_image_attributes’, ’my_post_thumbnail_sizes_attr’, 10, 3 );What I have done is that I have change 100vw in the size attribute to 50 vw and that will half the size of the image since it will pick an image near the half the size of the width of the screen. Learning more about srcset and the size attribute you can refine this and customize it really well.
I hope this could help you./Mats
- The topic ‘Too large intrinsic thumbnails on mobile’ is closed to new replies.
