[Resolved] Blog thumbnail images loading in wrong thumbnail size

[Miloš]

Hi guys,

On the blog post image versions that are loading are 1024×683 instead of 500×333 as specified in blog settings. Looks like this is happening only on Mobile, while on desktop selected thumnail size is loading correctly.

Do you have any insight as to why would this happen?

Thanks!

[David]

Hi there,

mobile devices generally have a higher DPR ( Device Pixel Ratio ) – nowadays thats a minimum of x2 and in a lot of cases ( including the Moto 4G that google uses to simulate mobile tests ) its x3 or higher.

So when the browser calculates the CSS width of the image, which on a mobile device may be 300 – 400px it then multiplies that by the DPR – so the pixel width it requires may be 600 – 1200px – which is why it grabs the best size available, that in your case is the 1024px size image.

If you want you can tell WP to NOT load any Images that are larger then X.
This snippet will tell it to not add any image size over 500px on the archives:

function set_max_srcset_width( $max_width ) {
    if ( !is_single() ) {
        $max_width = 500;
        return $max_width;
    }
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );

[Author]

Posts