[wp-trac] [WordPress Trac] #40469: How to remove full size image path from srcset and more intelligent choices in srcset candidate list

[WordPress Trac]

#40469: How to remove full size image path from srcset and more intelligent choices
in srcset candidate list
-----------------------------+------------------------------
 Reporter:  lisota           |       Owner:
     Type:  enhancement      |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  Post Thumbnails  |     Version:  4.7.3
 Severity:  normal           |  Resolution:
 Keywords:                   |     Focuses:
-----------------------------+------------------------------

Comment (by DigiP):

 I don't work on the WP team, but see here - https://css-tricks.com
 /responsive-images-youre-just-changing-resolutions-use-srcset/ - why you
 would want some larger images in there, even when you only needed a 300px
 image.

 If you take into account newer screens with even larger DPI than retina
 displays, sizes should be double and triple the normal image size to
 effectively be used on screens such as retina, High-dpi IPS, or 4k, etc.
 The browser, will pick the best image needed(or should in more modern
 browsers) while gracefully falling back on the normal 300px image you set,
 so if you only need 300px wide, you should also include at a minimum, the
 600px as well for retina, and possibly larger sets than that for higher
 res DPI screens. This is more future proofing than total solution, but you
 also have the option of manually adding html markup with set sizes, and
 you can even add the srcset yourself manually, which should override WP's
 settings to add all of them, if I am not mistaken.

 Also to quote here- https://make.wordpress.org/core/2015/11/10/responsive-
 images-in-wordpress-4-4/ -
 "Note that for compatibility with existing markup, neither srcset nor
 sizes are added or modified if they already exist in content HTML." which
 is my thinking of, instead of adding media button to insert, copy the
 uploaded images URL, and manually add the HTML to override.

 Replying to [ticket:40469 lisota]:
 > On our site, we have a number of image sizes registered in WP, in
 addition to the default ones, for a variety of purposes. A large one to
 fill the width of our column, smaller ones for some custom image output,
 etc.
 >
 > The result of this is a sloppy srcset candidate list filled with URLs
 that may make no logical sense in a particular location in the markup. WP
 does have an upper size limit to prevent giant images from being in
 srcset, and also matches aspect ratio, but nothing else.
 >
 > I have been able to hack together a filter using
 `wp_calculate_image_srcset_meta` to unset various sizes in the `sizes`
 array. But if the full size of the image is smaller than the
 `max_srcset_width` parameter, it still gets included, and there should be
 some way to remove it. The full size of the image is not part of the
 `sizes` array in image_meta.
 >
 > It actually points to a larger issue with WP srcset implementation,
 which is that is mindlessly fills the HTML with srcset candidates that in
 many instances would never be used, adding lots of excess markup that a
 developer wouldn't add.
 >
 > For example, we have a 300px wide sidebar where we output an image. The
 sidebar is never larger than 300px, and even is that size in our
 responsive site on mobile. The srcset outputs a 150px, 200px, 300px,
 600px, 768px and 1240px, based on the sizes registered in our installation
 and the built-in ones. Logisitically, all that is really needed for this
 layout is 300px and probably the 600px version. We have all sorts of
 examples like this where the srcset includes either smaller or larger
 sizes than are physically possible in a given layout.
 >
 > Obviously WordPress cannot know how a site is styled, but it feels like
 there needs to be a more robust way of dealing with this. It is not a
 great feature to load up on unneeded markup.
 >
 > As a theme developer, I would like the ability to constrain the srcset
 candidate list in an intelligent way each time I output img tags into the
 markup. It is easy for me to say "at this location, this image will never
 be smaller than 300px, so don't give me anything smaller, and will also
 never be bigger than 300px, so only go up to a 2x version and skip
 anything larger.
 >
 > I'm guessing this is exacerbated by a variety of themes and pluging that
 may load up on extra registered image sizes as well.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/40469#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform