I recently moved an Eleventy static site to start generating AVIF images. It is absolutely incredible the savings. I have images which went from 260kB to 16!

I used an npm module called @11ty/eleventy-img which renders the image variants at build time and generates the appropriate HTML for the browser to select the correct variant.

All I have to do is this, and I get correctly sized variants in JPG, WebP, and AVIF:

    {% image "./src/static/images/grandma-holding-heirloom-video-book.png", "Woman holding Heirloom video book", "1152, 1896", "(min-width: 450px) 1896px, 1152px" %}