This example shows how an AVIF image can be used along with a low-quality thumbnail image to show the lower quality preview while the larger image is loading.
It requires the use of a parent
<picture> tag due to CSS restrictions. If anyone knows a way to fold this
into a single
<img> tag, please let me know.
This technique could be applied to any image format (such as WebP/WebP2, HEIF, GIF, PNG, etc), but probably wouldn't be necessary for types that support progressive encoding/rendering (such as JPEG and JPEG XL) as they will provide a similar effect without the use of an extra image or code.