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"
     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" 
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?

3 Answers 3


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.

  • 1
    Thanks! This didn't solve my problem, but is very good to know. (If you're curious about the solution, see my answer below. I should have mentioned that I'm using the Twenty Sixteen theme.)
    – Pekka
    Aug 5, 2017 at 11:56

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.


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

  • But shouldn't WP be outputting the original image in my case?
    – Pekka
    Aug 5, 2017 at 10:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.