gregives/Twelvety

Generating AVIF images is very slow

gregives opened this issue · 7 comments

gregives commented

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.

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

vandenbosm commented

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.

vandenbosm commented

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

gregives commented

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.

  • 👍1
gregives commented

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?

theapplegates commented

I think that is a good solution.

  • 👍1
vandenbosm commented

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 🍻