Hi there,
I’ve been looking into reducing page layout shifts when images are loaded, which improves the UX and Google Page Speed scores.
There are a variety of solutions that help with this. However, most require the intrinsic image width and height on the <img>
tag and some CSS so the browser can correctly fill the image space before downloading the image.
I’ve searched the docs and forums, but they don’t mention the image tag supporting the intrinsic image width and height, A.K.A., the original image width and height.
If this is not supported, would it be possible to add support to L&L? It seems all websites could benefit from this and improve Google Page Speed scores.
Example logic:
<img src="{Field image_url}" width="{Field image_width}" height="{Field image_height}">
Info on the layout shift solution:
P.S. The sizes
and srcset
tags do not help with preventing layout shifts.
Thanks.