Open MattWilcox opened 2 years ago
This would be a great enhancement! You've made a clear description of the use case @MattWilcox. This will probably also help for lighthouse layout shift score? https://web.dev/cls/#layout-shift-score
So you can definitely this manually already with ImageOptimize, but I agree it'd be nice to have it done in a more automated way.
Is your feature request related to a problem? Please describe.
Best practice is to have
width
andheight
attributes on images, so that the browser can reserve layout space prior to asset download, decode, and render. That's fine as long as all<source>
definitions deliver an image that's the same aspect ratio as the<img>
- you can just plop the width and height on the<img>
and call it done.You need to do more when the sources are delivering differently cropped variants at different breakpoints - the
width
andheight
values on theimg
may be "wrong" for thesource
that is to be applied; resulting in the incorrect space being reserved for layout, and a resulting shift once the asset is loaded.You'd want this sort of Picture behaviour when you're adapting an element in a design to do more than just scale objects at different breakpoints. e.g., shifting an image+text "card" so that the image is a thin strip running vertically on some views, but horizontally on others. etc.
source
when used inpicture
supports bothwidth
andheight
properties to achieve mitigation of layout jank in these cases - Image Optimize doesn't seem to output this, or really offer a way to do this manually, from what I can see in the docs.Describe the solution you would like
I want to be able to solve for art-directed transforms by being able to output markup along these lines:
I've been able to do this with Imager / ImagerX but can't see how in Image Optimize.
Further, as I'm not 100% sure what browsers are doing in order to actually achieve this, I have in the past been using generated CSS to force this behaviour, by looping through the transformed assets to create CSS rules that will apply the correct aspect-ratio before the picture element is loaded - which again, I can't see how to accomplish with Image Optimizer: