WebP を AVIF に変換

よく語られる「AVIF のほうが軽い」という話は、すべての画像に等しく当てはまるわけではありません。フラットな色面やくっきりした境界を持つ画像では AVIF が大きく勝ちますが、写真のような連続階調の絵では、既定の画質設定において差がほとんどない、あるいは AVIF のほうが大きくなることもあります。

数字を鵜呑みにする前に、代表的な画像を数枚変換して、実際のバイト数を比べてみる価値があります。ライブラリー全体を信念だけで移行すると、結果的にファイルが大きくなり、しかも画質が落ちるという事態になりかねません。

AV1 のイントラ予測は、ほぼ均一な色の大きな領域と、それを区切るはっきりした境界の組み合わせを扱うのが得意です。VP8 由来の WebP の符号化より多くのブロック分割と予測モードを使い分けられるため、境界を正確に描きやすくなっています。

インターフェースのスクリーンショット、図表、イラスト、無地の背景に置かれた商品写真、文字を含む画像などがこれに該当します。サイトの画像点数の中でこうした種類が占める割合は意外に大きく、優先して変換する価値のある対象です。写真中心のヒーロー画像は、個別に測定してから判断してください。

この変換は WebP を画素にデコードし、その画素を AVIF として符号化し直します。元の WebP が非可逆だった場合、そこにすでに存在するアーティファクトごと AVIF の符号化器が忠実に描写しようとし、その上に AVIF 自身の圧縮の跡が重なります。

サイトに元の PNG や JPG がまだ残っているなら、そちらから AVIF を作るほうが、WebP から作るよりきれいで、多くの場合小さくもなります。このページは、WebP しか残っていない場合のためにあります。元のファイルが残っているなら、そちらを使ってください。

WebP は現行のあらゆるブラウザーで表示できますが、AVIF は現行の主要なブラウザーで表示できるという状態で、両者は同じではありません。古い端末や制限のかかった業務用のパソコン、アプリ内ブラウザーでは、AVIF が読めずに画像自体が表示されないことがあります。

picture 要素に AVIF のソースと WebP や JPG のフォールバックを添えれば、この問題は解消します。マークアップが数行増える代わりに、対応リスクをほぼゼロにできます。ただしこれは両方のファイルを保持することを意味するため、ストレージ削減が目的の移行であれば、そのコストも計算に入れておく必要があります。

AV1 は圧縮の代わりに解析の計算量を必要とします。ここで使われる符号化器は WebAssembly にコンパイルされた libavif で、WebP から AVIF への変換はこのサイトの他の組み合わせよりも明らかに時間がかかります。

その処理はあなたの端末で、あなたが選んだタイミングで一度だけ行われ、訪問者ごとには発生しません。ただし数百点のフォルダーとなると、放置して進める作業になり、スマートフォンでの実行には向きません。フラットな画像から先に手を付けて、効果を測りながら進めるのが現実的です。

透明度はきれいに保たれます。両形式ともフルの 8 ビットアルファチャンネルを持っていて、AVIF はアルファの扱いが効率的なので、切り抜きの商品画像やロゴでは特に安定して有利になります。

一方で階調やガマットが広がることはありません。AVIF は 1 チャンネルあたり 12 ビットや広色域を扱えますが、このパイプラインはすべてを 8 ビットの RGB としてデコードし、元の WebP も 8 ビットだったため、昇格させる情報がそもそもありません。

設定は 1 から 100 の範囲で、既定値は 82 です。同じ数値であっても符号化器が違えば意味も変わります。すでに非可逆の WebP が元になっている以上、既定より少し高めに設定しておくという考え方には根拠があります。

三枚ほどの代表的な画像を、いくつかの設定で変換し、実際に表示されるサイズでバイト数と見た目を比べるのが確実です。文字を含む画像は、非可逆圧縮が最初に崩す対象なので、高めの設定を選んでおくと安心です。

すでに WebP を使っていて、ページの表示速度の目標を満たしているなら、何もしないという判断も十分にあり得ます。JPG や PNG から WebP への移行こそが大きな節約を生む一歩で、WebP から AVIF への移行は二次的な効果にとどまり、時には効果がマイナスになることもあります。

明らかに価値があるのは、大きなフラット画像、画像の多いページ、スクリーンショットや図が多いサイトです。目的が容量削減ではなく互換性の向上であれば、WebP から PNG や WebP から JPG への変換のほうが適しています。

両方のコーデックはタブの中で WebAssembly として動作し、該当する形式のファイルがドロップされたときにだけ読み込まれます。ファイルはどれも通信を通らず、公開前のサイトやクライアントの素材でも安心して扱えます。

無料枠は 1 ファイルあたり 100 MB で、ウェブの素材としては十分すぎる大きさです。フォルダーごとドロップすれば、それぞれが進行状況とともに変換され、結果は ZIP にまとまります。アニメーション WebP が混じっている場合は、静止画のデコーダーしか使われないため、そのファイルだけエラーになり、他は問題なく完了します。