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