Responsive images blurry - srcset attribute doesn't include full size version

[nicasi]

It seems the_post_thumbnail() function doesn't produce the correct code for responsive images.

Steps to reproduce the problem:

• Set an image wider than 1024px as a featured image on a post (in a theme supporting this feature)
• Use the_post_thumbnail() somewhere in a theme file and look at the output.

Expected: srcset of img tag should include full size version.

Instead: srcset doenst include full size version, widest version included is 1024px version thus making rendering of viewport wide images on higher resolution devices (wider than 1024 physical pixels) blurry.

[nicasi]

Screenshot of the_post_thumbnail() output and expected output

[SergeyBiryukov]

Hi @nicasi, welcome to Trac! Thanks for the report.

srcset doenst include full size version, widest version included is 1024px version

There's a max_srcset_image_width​ filter for the maximum image width to be included in a srcset attribute.

The default maximum width is 1600 pixels. If your images are wider, you could increase it to 2000 with this code:

/**
 * Increase the maximum image width to be included in a 'srcset' attribute.
 *
 * @param int $max_width The maximum image width to be included in the 'srcset'. Default '1600'.
 * @return int Filtered maximum image width.
 */
function wp35108_increase_max_srcset_image_width( $max_width ) {
	return 2000;
}
add_filter( 'max_srcset_image_width', 'wp35108_increase_max_srcset_image_width' );

[joemcgill]

Hi @nicasi,

Thanks for submitting a ticket about this. @SergeyBiryukov is exactly right, that we're currently limiting the image width included in srcset attributes to 1600px in order to make sure users aren't served unnecessarily large files. The code above will allow you to adjust that size limit.

Out of curiosity, can you tell me a little bit more about your setup? What image sizes do you have available on your server, what size image is showing up in the src attribute for your image, and what is the layout size of this featured image when viewed at the widest possible breakpoint (i.e., not scaled down in a mobile layout)?

Thanks,
Joe

[nicasi]

Replying to joemcgill:

Out of curiosity, can you tell me a little bit more about your setup? What image sizes do you have available on your server, what size image is showing up in the src attribute for your image, and what is the layout size of this featured image when viewed at the widest possible breakpoint (i.e., not scaled down in a mobile layout)?

Hi Joe,

I have the default image sizes (150x150 cropped, 300x300 max, 768x768 max, 1024x1024 max and full size). I can understand the need of a maximum in case a user uploads for example a +3000px image. In my case it might be interesting to add this maximum resolution (eg 1600 or a custom one) to the default sizes via add_image_size.

In my test layout I want to display the featured image as a full viewport width image. If I upload a 1920px wide image a call to the_post_thumbnail() (without arguments or with 'full') gives me a src of the full width image. However the srcset has only 300, 768 and 1024. Since the src is ignored and only the images in the srcset are used the biggest available image is 1024 wide. To display a full width image at 1920px wide this is insufficient.

I can understand the need of a maximum when using the_post_thumbnail() without arguments but in my opinion the_post_thumbnail('full') should put the original upload in the srcset too.

Kind regards,
Kevin

[nicasi]

The funny thing is currently the browsers that don't support srcset do get the full resolution image via src. Only supporting browsers get the low resolution image which is kind of a bummer.

There's also a forum post here (unrelated to me): ​https://wordpress.org/support/topic/44-upgrade-made-featured-images-blurry

Btw, I really like the inclusion of this feature in the core.

[joemcgill]

Replying to nicasi:

The funny thing is currently the browsers that don't support srcset do get the full resolution image via src. Only supporting browsers get the low resolution image which is kind of a bummer.

Ah, of course. If the src was larger than 1600px we should probably include it regardless. We just don't want to upgrade anyone's image from an large intermediate to an uncompressed full size.

[azaozz]

Replying to joemcgill:

If the src was larger than 1600px we should probably include it regardless.

Not sure if this is best. Having full size images that were uploaded directly from a camera (> ~2500px) in post_content should be treated as user error. Currently in these cases the browsers download the "proper" size from the srcset saving significant time and bandwidth.

Maybe we should bump the default max_srcset_image_width to something like 2048, but still not include the full size. This will prevent using 24 megapixel (5-6MB) files for a 900px "retina" images.

[kirasong]

To me, it's pretty clear that user expectation < 4.4 is that the image a user supplies in src is the image that will be delivered.

I don't feel that it respects user content at this point to do otherwise -- especially when we're talking about intentionally serving up lower fidelity images that are creating user complaints already.

My opinion is to go ahead and add src to srcset in all cases for 4.4.1, then talk about a smarter solution we can include with 4.5, including some of the options given with a larger size. Especially with a minor release, we should be extra careful not to break the covenant of user content.

[jorbin]

I'm with Mike on this. src should be treated as the canonical and always included in srcset. Attempting to ensure users don't include rediculously sized images is a worthy goal, but it's not what the inclusion srcset aims to solve.

A patch is needed if this is going to make it into 4.4.1

[joemcgill]

In 35108.diff we only filter out images larger than max_srcset_image_width if that image isn't in the src attribute. A test is included in the patch.

[azaozz]

In 36110:

Responsive images: when creating srcset do not exclude the image size which is in the src attribute even when it is larger than max_srcset_image_width.

Props joemcgill.
Fixes #35108 for trunk.

[azaozz]

Reopen for 4.4.

[rabmalin]

I was just about to create a ticket but saw this ticket. I am not sure this is the same issue. If it is different then I will create new ticket.

    <img width="680" height="510" src="http://staging.dev/wp-content/uploads/2011/07/dsc02085-1200x900.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Orange Iris" srcset="http://staging.dev/wp-content/uploads/2011/07/dsc02085-300x225.jpg 300w, http://staging.dev/wp-content/uploads/2011/07/dsc02085-768x576.jpg 768w, http://staging.dev/wp-content/uploads/2011/07/dsc02085-1024x768.jpg 1024w, http://staging.dev/wp-content/uploads/2011/07/dsc02085-1200x900.jpg 1200w, http://staging.dev/wp-content/uploads/2011/07/dsc02085.jpg 1600w" sizes="(max-width: 680px) 100vw, 680px">

I am using Twenty Fifteen theme, WordPress version 4.4. post-thumbnail size is 825x510. Original image size is 1600x1200. But I am not getting expected image.

[dd32]

In 36150:

Responsive Images: when creating srcset do not exclude the image size which is in the src attribute even when it is larger than max_srcset_image_width.

Merges [36110] to the 4.4 branch.
Props joemcgill.
Fixes #35108.