We can hint to the browser that it can paint to the screen before individual images are decoded using the decoding attribute.
<img src="./avatar.png" decoding="async" />Setting decoding to async lets the browser know it can paint content earlier, before it is has finished decoding this image.
The HTML standard describes this as:
Image decoding is said to be asynchronous if it does not prevent presentation of other content.
Applying this to images "below the fold" can improve performance by allowing visible content to be painted to the screen earlier.
Applying decoding="async" to images "above the fold" can cause flashing - as other content such as text can be painted to the screen before images are decoded. After they've been decoded they will appear to pop in.
If we want to ensure an image is decoded before content is painted to the screen we need to use decoding="sync", like this:
<img src="./avatar.png" decoding="sync" />The default state for this attribute is auto, which lets the browser decide whether to use async or sync decoding:
<img src="./avatar.png" decoding="auto" />See: