Respect CropArea while generating placeholder image

[brosua]

Images can be cropped to fit a certain aspect ratio. To display a placeholder image with a correct aspect ratio, the crop area should be used. Currently the original size is used. This helps to improve Cumulative Layout Shift.

[s2b]

Could you give a concrete example where this is the case? Do you use srcset/sizes or picture?

[brosua]

I use picture.

[s2b]

Hm, I don‘t think that there can be a correct crop area to use for the placeholder image when using picture, at least not with my current implementation.

Currently I use the src attribute of the fallback image tag to provide that placeholder image. Thus, I can only set one placeholder and not one for each configured breakpoint. In order to do that, the implementation would need to add srcset attributes to the source tags and generate several placeholders.

However, I‘m not really sure if that would solve the original problem. The layout shift would probably occur either way because of #78. I guess that some layout shifting is just something we need to live with for now when using image art direction, until the HTML5 standard changes and browsers implement this.