WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#35108 closed defect (bug) (fixed)

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

Reported by: nicasi Owned by: joemcgill
Milestone: 4.4.1 Priority: normal
Severity: normal Version: 4.4
Component: Media Keywords: has-patch has-unit-tests fixed-major
Focuses: Cc:
PR Number:

Description

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.

Attachments (2)

screenshot.PNG (9.3 KB) - added by nicasi 4 years ago.
Screenshot of the_post_thumbnail() output and expected output
35108.diff (2.4 KB) - added by joemcgill 4 years ago.

Download all attachments as: .zip

Change History (20)

@nicasi
4 years ago

Screenshot of the_post_thumbnail() output and expected output

#1 @SergeyBiryukov
4 years ago

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' );

#2 follow-up: @joemcgill
4 years ago

  • Keywords reporter-feedback added
  • Owner set to joemcgill
  • Status changed from new to reviewing

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

#3 in reply to: ↑ 2 @nicasi
4 years ago

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

#4 follow-up: @nicasi
4 years ago

  • Keywords reporter-feedback removed

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.

#5 in reply to: ↑ 4 ; follow-up: @joemcgill
4 years ago

  • Keywords needs-patch needs-unit-tests added
  • Milestone changed from Awaiting Review to 4.4.1
  • Status changed from reviewing to accepted

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.

#6 @joemcgill
4 years ago

  • Component changed from Post Thumbnails to Media

This ticket was mentioned in Slack in #feature-respimg by joemcgill. View the logs.


4 years ago

This ticket was mentioned in Slack in #feature-respimg by jaspermdegroot. View the logs.


4 years ago

#9 in reply to: ↑ 5 @azaozz
4 years ago

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.

#10 @mikeschroder
4 years ago

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.

#11 @jorbin
4 years ago

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
4 years ago

#12 @joemcgill
4 years ago

  • Keywords has-patch has-unit-tests added; needs-patch needs-unit-tests removed

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.

This ticket was mentioned in Slack in #feature-respimg by joemcgill. View the logs.


4 years ago

#14 @azaozz
4 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#15 @azaozz
4 years ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopen for 4.4.

#16 @rabmalin
4 years ago

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.

#17 @dd32
4 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

This ticket was mentioned in Slack in #core-images by joemcgill. View the logs.


4 years ago

Note: See TracTickets for help on using tickets.