🌌

Next.jsでavifを使ってみる

2023/04/10に公開

昨年firefoxがデフォルトでavifに対応して話題になった記憶がありますが、どうやらNext.jsのImageタグの自動最適化もavifに対応しているようなので試してみました

https://caniuse.com/avif

TL;DR

本番環境では使わないほうがいいです

module.exports = {
    images: {
        formats: ['image/avif','image/webp'],
    },
};

上のようにimagesのformatsにimage/avifを追記するだけで使用できます

テストの際には大量の画像を配置したページを使用したのですが、webpののみの場合、スクロールするのとほぼ同時に画像が表示されるのに対し、avifを使用した場合、圧縮に時間がかかるようで、スクロールから数秒遅れて画像が表示されるように感じました

また、これは推測を含むのですが、avifの画像を読み込む際、読み込みが完了するまでapiからの応答がなく、ページ自体の読み込みも遅延しているように感じました

そもそもavifへの変換はrustを使用したcavifでもかなり負荷がかかるため、動的に生成しているNext.jsの内部機能ではだいぶ無理があるのではないでしょうか

topなどで監視する限り、ページが画像を読み込み始めたタイミングから明らかに負荷が増えていたため、負荷よりもデータ転送量を重視する必要がある場合や、CDNでキャッシュを効かせられる場合を除き、あまり良い選択肢ではないと思います