AVIF With Preview Thumbnail

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.

It uses no JavaScript for the actual image or loading portion. The script is only to add a more appealing transition effect that occurs when the large image has completed downloading. Browsers without JS will still load and display the image, but the large image will pop in instantly overtop of the low quality version with no transition animation.

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.