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:

<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.