Image Size vs PageSpeed

Hi there,

when you upload an image to your Media Library, WordPress generates several smaller size versions of the image. Medium, Medium Large and Large.
And these sizes are all provided to the browser in the img HTML src-set
And the way your site is set up ie. the large image fills the width of the viewport on smaller screens, is absolutely perfect for the browser to use those smaller sizes as necessary.

So simply put, the size of the images you’re using absolutely fine as the src-set is handling responsive sizing for you.

You’re welcome!

Try this PHP Snippet:

function db_modify_srcset_sizes($sizes, $size) {
    if ( !is_single() ) {
        $sizes = '(max-width: 420px) 300px, (max-width: 1024px) 768px, 100vw';
    }    
    return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

the wp_calculate_image_sizes filter hook allows you to change the sizes attribute of the HTML img that WP outputs. By default it will return something likes this:

sizes="(max-width: 1152px) 100vw, 1152px"

Which effectively uses the max size image , it works great if the image fills the width of the viewport, as the browser will then just choose the best size image available, as you see with your single post. But in this case its terrible.

So the code above will apply to any NON single post, and rewrite the sizes to:

(max-width: 420px) 300px, (max-width: 1024px) 768px, 100vw

So on small sub 420px wide devices, it will advise the browser to use the 300px image, on sub 1024px devices to load the 768px wide image, and anything above that size just do the normal thing.

Awesome – glad to be of help