Why is Wordpress serving the 1024px version of my image and not the original on a 1920x1080 screen?

I have uploaded an image that is 2100px wide into a post, and inserted that image in the post body. I'm building a custom theme based on Wordpress' Twenty Sixteen.

The HTML looks OK:

img class="alignnone wp-image-2669 size-full"
     src="http://.../wp-content/uploads/2017/07/GrillSommer1.jpg" 
     alt="" width="2100" height="904" /

in the frontend, Wordpress does what I assume is its "responsive image" magic (I don't think I have added any plugins that would do this:)

img class="alignnone wp-image-2669 size-full" 
src="http://.../wp-content/uploads/2017/07/GrillSommer1.jpg"
alt="" width="2100" height="904" 
srcset="http://.../wp-content/uploads/2017/07/GrillSommer1.jpg 2100w,
http://.../wp-content/uploads/2017/07/GrillSommer1-300x129.jpg 300w,     
http://.../wp-content/uploads/2017/07/GrillSommer1-768x331.jpg 768w, 
http://.../wp-content/uploads/2017/07/GrillSommer1-1024x441.jpg 1024w, 
http://.../wp-content/uploads/2017/07/GrillSommer1-340x146.jpg 340w, 
http://.../wp-content/uploads/2017/07/GrillSommer1-500x215.jpg 500w, 
http://.../wp-content/uploads/2017/07/GrillSommer1-1200x517.jpg 1200w"
sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, 
       (max-width: 1362px) 62vw, 840px" /

If I'm reading the srcset information right, it should be serving

I don't have a problem with that in principle - but on a 1920x1080 screen, I am being served the 1024px version, which of course looks incredibly blurry!

Is there an obvious reason why this happens?

Topic content-width front-end images Wordpress

Category Web


The problem seems to be specific to the Twenty Sixteen theme, whose content area I suppose is limited to a maximum width of 840 pixels. The theme adds rules for responsive images in its functions.php, in the twentysixteen_content_image_sizes_attr() function.

function twentysixteen_content_image_sizes_attr( $sizes, $size ) {

    $width = $size[0];

    1200 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 1200px';

    if ( 'page' === get_post_type() ) {
        1200 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
    } else {
        1200 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
        600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
    }

    return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );

I'm honestly not quite sure how to adjust this to support a larger content width, or rather in my case, an image that is always 100% wide, so I'm disabling this for the time being.

For production, it's probably smart to look into this in more detail, though - serving smaller images to smaller-screen devices is certainly a good idea.


Your image's src is pointing to the full size image, so it's not an issue of permalink. The issue happens because of the sizes values. There is a variable that determines the width of your content, which then later WordPress uses to generates the responsive sizes for your images.

This global variable can be set manually in your theme's functions.php file:

if( !isset($content_width) ) {
    $content_width = 1920;
}

You can tweak with this variable to achieve your desired result.


You can check tab media setting in wordpresshttps://codex.wordpress.org/images/thumb/4/43/options-media.png/600px-options-media.png

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.