WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 5 months ago

#46155 assigned defect (bug)

Responsive images (srcset) not working on cropped files.

Reported by: olgri Owned by: joemcgill
Milestone: Awaiting Review Priority: normal
Severity: major Version:
Component: General Keywords: reporter-feedback
Focuses: Cc:
PR Number:

Description

When adding images to a page or using wp_get_attachment_image() function in a page template, responsive images do not get generated if the image size is set to 'crop' (e.g. thumbnail or a custom size). Basically, srcset is not added in html. Other sizes are OK though.

To reproduce the bug, make sure an image size is set to 'crop'. Then upload a new image and add it to a page selecting a full size first. Update the page and then remove the image from the page. Update and then insert it again and this time make sure to select the cropped image size. Update.
You will see that a standard <img> tag is generated in the frontend. E.g.:

<img class="alignnone size-thumbnail wp-image-10" src="/wp-content/uploads/photo-360x360.jpg" alt="" width="360" height="360">

instead of

<img class="alignnone size-thumbnail wp-image-10" src="/wp-content/uploads/photo-360x360.jpg" alt="" width="360" height="360" srcset="/wp-content/uploads/photo-360x360.jpg 360w, /wp-content/uploads/photo-720x720.jpg 720w, /wp-content/uploads/photo-768x768.jpg 768w, /wp-content/uploads/photo.jpg 1280w" sizes="(max-width: 360px) 100vw, 360px">

I have tested it on WP 5.0.3 and even tried downgrading to 4.9.9 and 4.9.8 but it's the same. Tested with all plugins deactivated and on the default twenty-something theme.
I have tried it on PHP 7.1, 7.2 and 5.6.
Tested both Guttenberg and the classic editor.

Change History (4)

#1 @olgri
9 months ago

sorry, the standard <img> tag gets generated as
<img class="alignnone size-thumbnail wp-image-10" src="/wp-content/uploads/photo-360x360.jpg" alt="">
(without width and height values)
but anyways, no srcset.

#2 @joemcgill
9 months ago

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

Hi @olgri. It's possible that srcset is not added to an image if there are no other image sizes with the same aspect ratio as the custom size or crop that has been selected. This is intentional because srcset is meant to give browsers the ability to load the correct file based on the display density and layout size of an image, so each source in a srcset list should be different dimensions of the same crop/aspect ratio.

Is it possible that this is what is happening in your case?

#3 @olgri
9 months ago

Hi @joemcgill
Do you mean I have to set a few custom image sizes with the same aspect ratio? If say I'm adding a custom size for a banner with dimensions of 2880px x 1440px... Do I also have to set custom sizes for 1440x720, 1024x512, 768x384, etc.? It used to work without these extra sizes though.

This ticket was mentioned in Slack in #core-media by tedmasterweb. View the logs.


5 months ago

Note: See TracTickets for help on using tickets.