Support for intrinsic image width and height attributes

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.

I’ve discovered that Litespeed Cache can add the image width and height when missing from the <img> tag, which resolves my issue. :slight_smile:

1 Like