[[380680]]

私たちが普段使い慣れている、あるいはウェブアプリケーションでよく使う画像形式は、PNG、JPG、GIF、SVG、WebP です。これらの形式については、2 つの記事にまとめましたので、興味のある方はぜひご覧ください。

• Web では JPG、GIF、PNG、SVG が使用されていますが、最も適した画像形式を選択するにはどうすればよいでしょうか?
• WebP 形式の画像をウェブサイトに追加しましょう。

WebPを導入した時点で、JPGやPNGと比較して、WebPは高いレンダリング品質とファイルサイズの小型化を両立しており、優れた性能と言えることは既に認識されていました。しかし、それでも満足できない人々がおり、次世代の画像圧縮フォーマットとして注目されているAVIFが開発されました。

この記事では、「AVIFとは何か？他の画像形式と比べてどのような利点があるのか​​？どのように使うのか？」という3つの質問に焦点を当てます。

AVIFとは何ですか？

AVIF画像フォーマットは、Netflixが2020年2月14日に初めて発表しました。Netflixは動画ストリーミング企業であるため、必然的に大量の映画ポスターを制作しており、それらはすべて非常に大きな画像です。そのため、Netflixはプレゼンテーション品質に対する高い要求を満たす一方で、画像ファイルサイズを可能な限り小さくすることを望んでいます。そこで、JPGに代わる新しい画像フォーマットを模索してきました。

実際、AVIF画像形式は、Alliance for Open Media（aomedia.org）がGoogle、Cisco、Xiph.orgと共同で開発しました。この形式は、圧縮率が非常に低く、高額なライセンスが必要となるJPEG XRとは異なり、オープンソースかつロイヤリティフリーの画像形式として開発されました。

AVIFは、オープンソースのAV1ビデオコーデックをベースにした新しいオープン画像フォーマットです。このフォーマットは、非可逆圧縮と可逆圧縮の両方を含むあらゆる画像コーデックをサポートし、アルファチャンネルも使用できるため、非常に柔軟性が高く、高品質のGIFアニメーションのように一連のアニメーションフレームを保存することもできます。また、HDRカラーをサポートした最初の画像フォーマットの一つでもあり、より高い輝度、色深度、そして色域を提供します。

JPEGとWebPとの比較

ダニエル・アレクサンダーセンというプログラマーがブログを書いていて、ブログの画像が消費するネットワーク帯域幅をできるだけ抑えたいと考えていました。しかし、どの画像形式を使うべきか迷っていたため、自分で調べてみることにしました。

彼は 600 枚以上の画像を使用し、同じ DSSIM 条件に基づいてそれらをさまざまな形式にエンコードしました。

そして、さまざまな形式の大量の画像データを比較して、彼は次のような結論に達しました。

• JPEG と比較すると、WebP 形式の画像のサイズは 30% 小さくなります。
• JPEG と比較すると、AVIF 形式の画像のサイズは 50% 小さくなります。

言い換えれば、AVIF 画像は WebP 画像よりも 20% 近く小さくなります 😱。

互換性はどうですか？

AVIF の優れたパフォーマンスを考えると、その互換性はどうでしょうか?

上の画像にあるように、2021年2月3日現在、AVIFの互換性は低く、Chrome 85、Firefox 86、Opera 71以降でのみサポートされています。IEやモバイルブラウザなど、他のブラウザではサポートされていません。今後、サポートが拡大していくと考えられます。

画像をAVIFに変換する

プロジェクトで AVIF 形式を使用する場合は、まずこの形式の画像を用意する必要があります。

オンライン画像圧縮アプリケーションであるSquooshを使えば、様々な画像形式を変換できます。さらに、Squooshには様々な高度な画像圧縮オプションが用意されており、お好みに合わせて選択できます。

どの圧縮オプションを設定すればよいかわからない場合は、オンライン ツール convertio.co を使用して画像形式を変換することもできます。

あるいは、コマンドラインを好む場合は、公式の AOMedia ライブラリ libavif を使用して AVIF ファイルをエンコード/デコードできますが、ここでは試しません。

Web開発におけるアプリケーション

AVIF はまだ広くサポートされていませんが、ネイティブ HTML ではまだ使用できます...要素のフォーマット。この要素はプログレッシブサポートに対応しており、画像ソースを読み込みたい順にリストアップでき、ブラウザはサポートしている最初のソースを読み込みます。ブラウザがサポートしていない場合は…デフォルト設定に戻ります。

 <写真>
 <ソース srcset= "img/photo.avif"タイプ= "image/avif" >
 <ソース srcset= "img/photo.webp"タイプ= "image/webp" >
 <img src= "img/photo.jpg" alt= "写真の説明" >
 </写真>

参考文献

https://aomediacodec.github.io/av1-avif/

https://www.ctrl.blog/entry/webp-avif-comparison.html

https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/

https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4