gregives / Twelvety

An Eleventy starter project built to be fast

Home Page:https://twelvety.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Generating AVIF images is very slow

gregives opened this issue · comments

Since #6, builds are taking much longer. It might be worth reverting the changes for now, or giving the user an option of which image formats to generate (no AVIF by default).

The AVIF images also seem strangely large compared to benchmarks I have seen.

commented

Malte Ubl, over at https://github.com/google/eleventy-high-performance-blog , added a cache option since sharp converting to avif was so slow.

#!/bin/sh

cp _site/img/remote/* img/remote/
cp _site/img/* img/
git status
git add img/
git commit -m "Persist images"

The script is titled .persistimages.sh and it is mentioned while the blog is building if the conversion is running slow.

Just a thought if you wanted to cache the images.

In my personal code, i've reduced the quality of the avif files to around 35. This has sped up creation times and have created the great looking images at about 50% of the WebP sizes.

I've also reduced the WebP quality to 60 as it also still maintains a very good quality at that range.

Thank you both for your comments! I'll experiment with reducing the quality of both AVIF and WEBP to see how much that improves build times. If it still takes a long time, I'll consider adding a permanent cache or giving the user the option of what image formats to output.

I've created a pull request which adds image formats to the Twelvety options file .twelvety.js, so that users can easily disable a format and change the quality. Do you think this is a good solution?

commented

I think that is a good solution.

Hi, I think that is a good solution and your implementation is very good! Sorry I didn't get to answer you yesterday!

I would almost recommend updating the twelvity.imageFormats to be more explicit:

 imageFormats {
   avif: {
    extension: "avif",
    quality: 30
  },
   webp: {
    extension: "webp",
    quality: 60
  },
   jpeg: {
    extension: "jpeg",
    quality: 75
  }
}

This way, future users know what the "Numbers" stand for and what they are setting and also enables future properties to be added with minimal work (e.g. set a custom background color for that image while loading in case you don't want to use the generated color: backgroundLoadingColor: "#FEFEFE")

Cheers 🍻