こんにちは、ツバサです。
競合サイトの商品画像を右クリックで保存しようとしたら、拡張子が「.avif」になっていて開けなかった。PageSpeed Insightsで自社サイトをチェックしたときに出てきた「次世代フォーマット」を調べていたらAVIFという名前が出てきたので、あわせて調べてみた。
AVIFとは
ひとことで言うと、動画の圧縮技術を画像に応用した次世代の画像フォーマットだ。正式名称は「AV1 Image File Format」で、動画コーデック「AV1」をベースにしている。
Alliance for Open Media（AOM）の公式サイトによると、AVIFはGoogle・Apple・Microsoft・Netflix・Amazonなどの大手企業が参加する団体が策定したオープンな規格だ。ロイヤリティフリー（利用料なし）で誰でも使える。
最大の特徴は圧縮効率の高さで、JPEGと比べるとファイルサイズが50%以上小さくなるケースもある。プレベルの解説記事にも書いてあったが、WebPよりもさらに高い圧縮率を実現している。
WKパートナーズの用語解説ページでも、AVIFの仕組みや圧縮率について詳しく紹介されていた。WebPとの違いを表にまとめるとこうなる。
| 項目 | JPEG | WebP | AVIF |
|---|---|---|---|
| ファイルサイズ | 基準 | JPEGの65〜75% | JPEGの40〜60% |
| 透過（背景透明） | 不可 | 対応 | 対応 |
| HDR対応 | 不可 | 不可 | 対応 |
| エンコード速度 | 高速 | 高速 | 遅い |
| 策定団体 | JPEG委員会 | AOM |
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に変換するという使い分けが大事だ。非可逆圧縮と可逆圧縮の仕組みについては非可逆圧縮・可逆圧縮のページで解説している。
