search

sitegeist / sms-responsive-images

This TYPO3 extension provides ViewHelpers and configuration to render valid responsive images based on TYPO3's image cropping tool.
GNU General Public License v2.0
34 stars 18 forks source link

Respect CropArea while generating placeholder image #75

Open brosua opened 3 years ago

brosua commented 3 years ago

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 commented 3 years ago

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

brosua commented 3 years ago

I use picture.

s2b commented 3 years ago

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.