How to remove full size image path from srcset and more intelligent choices in srcset candidate list

[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.

[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 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.