How to fake AVIF thumbnail images

AVIF is the hip new image format. It is born out of video compression technology. Modern video streaming services have a complicated relationship with multiple resolutions. A video is usually encoded several time - for high, medium, and low bandwidths. When you start streaming, your playback device usually picks the lowest quality stream to start with. If it downloads it quickly, then it jumps to the higher resolution. You may have noticed this when the first few seconds of a streaming show are blocky and horrible, only to snap into a higher resolution.

But, sadly, AVIF doesn't have that. There is a long discussion about bringing thumbnails to the file format - and there is a possibility that it will be coming soon.

In the meantime, here's how to fake a thumbnail for an AVIF picture. You will need a modern browser with AVIF enabled to view these examples.

The trick is that AVIF can be highly effective at low resolutions.

1. Take your original JPG image and reduce it in size to, say, 5%.
2. Using CAVIF - or your favourite encoder - create the lowest possible quality conversion.
   • cavif --speed=1 --quality=1 small.jpg
3. Base64 encode the resultant image.
4. Set it as the background-image in your CSS:

 HTML<img

    width=1024

    height=768

    alt="Graffiti saying Misfits Welcome."

    style="background-image: url('data:image/avif;base64,AAAAFGZ0eXBhdmlmAAAAAG1pZjEAAACgbWV0YQAAAAAAAAAOcGl0bQAAAAAAAQAAAB5pbG9jAAAAAEQAAAEAAQAAAAEAAAC8AAACiQAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAARWlwcnAAAAAoaXBjbwAAABRpc3BlAAAAAAAAAOYAAACtAAAADGF2MUOBAAAAAAAAFWlwbWEAAAAAAAAAAQABAgECAAACkW1kYXQSAAoJP935awtAQ0BUMvkEZh55TLQkb5Dz/DAM7DVQAFYBBC4EpeaYrQU02SMcyibnGwpWdJ9O5rKJX07oUMJYxx3w8OFjy6qGZ80TWDMInxBNSG8yK4+Xn6AOFntHwgHqPP5nQl/SeOAZdYDwGz94ETf8C2HgnSu05TbWOz2QUImbJ6LDQLCiB2kJzscFG+eCVnPZk75b1ZDOQ12rcgctsQ0hn5iOJfK8Ihsa+TaOmHiV3G3EwZdYsFglrahpgxAc0QcLY95TnkKjG7HaIv26+KUW8WzhQFyl8GqVUiuGkpYHNUZCgoJtrrf+b+TiUPf0WZ6S8m5K4OY9ZyqPnDiLuDVVglYV4jP3KUVZ4XjowWxfvuX2HqWgTWFskIUcCvoZVQ3zZIkIEmrH3K1M0WeeForNzCw1BB6AhY163x6HtXklunu2hwn3VASqzg3kl0nZIMFSwEBctgVB211rP/dQKw2D10XNEfxk2ekThwhCyQ9PCXBGE+oloAcR6EWIy21tafNILd1kK1Y+KMqhTG5FwLdGm8Y2Z1OBlJWGKhZvhvDgz501cXUbgyLFXjAIHWWRidROV4TD2rw20KecpKncYU707TmjsLMwX9zyhp4P5zgmp2WUaJJWnuD1VwMn35/pDlPw/rcE0fUO0SkWdamdNC8h2k1gK4XtL8NRIUby9LgzPtqZl/twMFK1Kk+Mwbxxf6UmzV4IvvD4VWh8SQwzOX+1NcVb2E5pvcT+VpC4+tGXMY8JDP34IWbGN+AcC/DIAkCaY/p8DoNfQVCVZXTwdF/8I/gN6Mk08miJQuvuRNZAT0zIu3AwUiV1CtgA76g3ZhPYZgdHWS6jKcwQ0DdoYnY35S5Mn1qA');

        background-repeat:no-repeat; 

        background-size: 1024px 768px;"

    loading="lazy"

    src="Big.avif"

/>

Here's what it looks like while the main image is loading (you may need to enable AVIF in your browser:

Obviously, it isn't pretty! But it will allow something to be displayed while your full resolution image is slowly loading.