3 ms·
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
by zackbloom 5y ago
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" %}
- anthropodie 5y agoIt's baffling to me that no one has mentioned about jpeg-xl here yet. It solves most issues mentioned in this thread https://jpeg.org/jpegxl/ https://jpeg.org/jpegxl/
- bscphil 5y agoIt's not supported in many (any?) web browsers.
- jaffathecake 5y agoCorrect, no browsers support it right now. We have a preview of it in https://squoosh.app https://squoosh.app if you want to try it out (also WebPv2).