Archived topic
Image Optimisation Help
5 replies · Started by Sunil on June 23, 2021
Dear Team
I tried to optimise my images by setting the image size in customiser to the rendered image size I see in the developers tools. It drastically reduced the served size. Thanks to you!
Now, what I see is that the images are served at same size (808x455) for mobile as well while the rendered size on mobile is 334 x 188. Is there a way to set different size for mobile images?
I hope I make sense here.
Hi Sunil,
Yes that definitely makes sense.
Check my answer here on how to go about it - https://generatepress.com/forums/topic/how-to-put-a-small-size-featured-image-on-mobile-posts-and-pages/#post-1826124
It's basically adding a new srcset by registering a new image size for 334px wide images for mobile and using Regenerate Thumbnails plugin to generate a new image file for that newly registered image size. :D
Hello Elvin
Thanks for the response. I went through the answer. Unfortunately, I'm not a techy. Can you provide me with a simple code snippet that I can paste into my snippets plugin? I'll easily do the non-techy part of regenerating thumbnails and cache clearing.
Hi there,
not sure - but try adding this PHP Snippet:
function db_modify_srcset_sizes($sizes, $size) {
return '(max-width: 360px) 300px, (min-width: 361px) 808px, 100vw';
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);Dear David
Unfortunately this didn't work. I even tried disabling the other code -
add_action( 'init', function() {
add_image_size( 'my-archive-featured-image', 808, 455, true ); // 808 width, 455 height, crop
} );Still it didn't work.
Activating your code delivers the image at original sizes (1200 width)
Is the function i provided still added to the site ? As i cannot see it change the sizes value in the HTML ?
You should keep you original piece of code for creating the 808px size.
