A little known attribute for HTML image - decoding async

The HTML image tag has a hidden attribute called decoding.

When the image tag loads, content below the image has to wait for the image to finish loading before the rest of the content is displayed. With the decoding attribute you have three options which allow you to decide how the the image is loaded.

Example output

<img src="yourimage.jpg" decoding="async" />
<img src="yourimage.jpg" decoding="sync" />
<img src="yourimage.jpg" decoding="auto" />

Attribute options

sync: the image will be rendered only after the image is ready; Use this for a complete experience.
async: the site will continue to render, once complete the image will then start to decode, the browser will update the presentation; Use when performance is important
auto: will allow the browser to determine which is the best approach

Placeholder

If you opt for the decoding="async", it might be a good idea to load a placeholder where the image should show. You can opt for a background colour or SVG.

Example output

<img src="yourimage.jpg" decoding="async" style="background-size: cover; background-image: url(data:image/svg+xml;base64,[svg text]);"/>

View compatibility information.