search

Niels-IO / next-image-export-optimizer

Use Next.js advanced <Image/> component with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.
414 stars 50 forks source link

Convert to AVIF #19

Open AdamPetroff opened 2 years ago

AdamPetroff commented 2 years ago

Hi, is there a specific reason why there is only conversion to WEBP available? AVIF is supposed to be even better. I'm thinking about coding it up, but I wanted to ask first. There could be the option to convert to avif by default, with the fallback to webP / orginal, if the browser doesn't support AVIF.

Niels-IO commented 2 years ago

Hi @AdamPetroff, Thanks for the suggestion. Next.js default behavior is to use the WebP format, so I have made the same choice. The browser support is quite limited: https://caniuse.com/avif Therefore, we would need to generate more files (AVIF and WebP versions) for a relatively small gain in compression efficiency. I would suggest keeping the default as WebP, but you can code the use of AVIF as an option if you like.

johnpyp commented 2 months ago

Hi, @Niels-IO I suggest this get re-opened. Since May 2022, browser support is actually way better, and size advantages + visual fidelity over WebP has continued to improve. It's actually quite noticeable now, and worth supporting.

Additionally, sharp supports avif natively now, and NextJS <Image> supports it too.

einomi commented 3 weeks ago

Might be a good idea to use <picture> tag with fallbacks: avif -> webp -> jpg/png

Niels-IO commented 2 weeks ago

One pitfall I see currently is the lack of support for animated images on iOS Safari. With webp, this would work. So if the user would choose avif as the primary format, I would have to stop using the webp format for animated images and directly fall back to jpg/png. I may consider implementing it :)