AVIFとは？
JPEGの次の標準になるかもしれない画像形式を調べた

AVIFとは

ひとことで言うと、動画の圧縮技術を画像に応用した次世代の画像フォーマットだ。正式名称は「AV1 Image File Format」で、動画コーデック「AV1」をベースにしている。

Alliance for Open Media（AOM）の公式サイトによると、AVIFはGoogle・Apple・Microsoft・Netflix・Amazonなどの大手企業が参加する団体が策定したオープンな規格だ。ロイヤリティフリー（利用料なし）で誰でも使える。

最大の特徴は圧縮効率の高さで、JPEGと比べるとファイルサイズが50%以上小さくなるケースもある。プレベルの解説記事にも書いてあったが、WebPよりもさらに高い圧縮率を実現している。

WKパートナーズの用語解説ページでも、AVIFの仕組みや圧縮率について詳しく紹介されていた。WebPとの違いを表にまとめるとこうなる。

EC実務で出てくる場面

EC担当としてAVIFに出会う場面はまだ限られているが、じわじわ増えてきている。僕が遭遇したケースを書いておく。

競合サイトの画像が.avifだった

冒頭に書いたとおり、競合のECサイトで商品画像を保存しようとしたら.avif形式だったことがあった。これはそのサイトが使っているCDN（Cloudflareなど）が、ブラウザの対応状況に応じてJPEGを自動的にAVIFに変換して配信していたためだ。スプールの比較記事にも、CDNの自動変換によるAVIF配信の実例が紹介されていた。

PageSpeed Insightsの「次世代フォーマット」指摘

PageSpeed Insightsで「次世代フォーマットで画像を配信してください」と出たとき、WebPだけでなくAVIFも選択肢として挙がる。アーティスの実践ガイドによると、Googleはこの指摘でWebPとAVIFの両方を推奨している。

Shopifyなどのプラットフォームでの自動対応

Shopifyは2024年からAVIF形式での画像配信に対応している。商品画像をJPEGでアップロードすれば、対応ブラウザにはAVIF、非対応ブラウザにはJPEGやWebPが自動配信される仕組みだ。自社でShopifyを使っている場合は、特に作業しなくてもAVIF配信ができている可能性がある。

覚えておきたいポイント

まずWebP、その次にAVIFという順番が現実的

AVIFのほうが圧縮効率は高いが、エンコードに時間がかかる点や、対応ソフトがまだ少ない点を考えると、まずWebPで対応しておいて余裕があればAVIFも追加する、という進め方が現実的だ。DAD UNIONのWebP・AVIF比較記事でも同様の結論が書かれていた。WebPについてはWebPの解説ページにまとめてある。

pictureタグでフォールバックを設定する

自社サイトでAVIFを使う場合、古いブラウザ向けにJPEGやWebPを用意しておく必要がある。HTMLのpictureタグを使えば、ブラウザの対応状況に応じて配信する画像を自動で切り替えられる。CDNの自動変換を使えばこの設定も不要な場合がある。画像の最適化全般については商品画像の圧縮・軽量化ガイドにまとめた。

編集用データとしてはまだ不向き

AVIFはWeb配信に最適化されたフォーマットであって、PhotoshopやLightroomでの編集作業には向いていない。撮影した商品写真の元データはJPEGやRAW、PSDなど従来の形式で保管しておき、Web公開時にAVIFに変換するという使い分けが大事だ。非可逆圧縮と可逆圧縮の仕組みについては非可逆圧縮・可逆圧縮のページで解説している。

ツバサ

EC関連の会社で働いています。少人数の職場なので、ささげ業務の手配から画像の外注管理、ページ更新、バイトさんへの作業指示まで守備範囲は広めです。Photoshopは苦手なので本格的な画像加工は外注に出していますが、何社も試した分、業者選びや納品チェックには慣れました。このブログは仕事の中で身につけたことの記録です。