WebPよりも軽いAVIFとは?次世代画像フォーマットを探る!

コアウェブバイタルズの影響も受けて、表示速度に関する知識や、画像の圧縮に関してなどの情報集めに、奔走している運営者様は多いでのはないでしょうか?

現在では、おそらく『WebP』がブラウザの対応状況なども踏まえた上では最も使いやすく、圧縮率の高い画像フォーマットではないでしょうか?

今回は、そのWebPを超えてくる軽量化を可能とした次世代画像フォーマットである『AVIF』についてお話を進めていきます。

AVIFとは?

HDRカラーをサポートしているので、アルファチャンネルやアニメーションにも対応可能。

AVIFとは、AV1 Image File Formatの略称で、画像や画像シーケンスをAV1で圧縮してHEIFファイル形式で保存するための画像ファイルフォーマットの仕様です。

Jpegと比較すると、約95%以上、WebPと比較しても30%近くのサイズ削減が可能となっています。

元々は、前身である有料ライセンスの『HEIF』形式というフォーマットが割と昔から存在していました。ただ、ライセンス費用が高額であることや、権限元が複数団体にわかれていることなどから、思うように普及しませんでした。

そして、その後にロイヤリティーの無い映像コーデックとして開発が進められたのが『AVIFコーデック』となり、静止画用に転用したものが2020年の2月にリリースされた『AVIF』となっています。

AVIfのメリットとは?

大きな特徴がいくつかありますが、筆者の理解している範囲では、

  • WebPより高画質でコンパクト(サイズが同じでも画質が高く、JPEG特有のブロックノイズ等も発生しない)
  • Amazon・Netflix・Google・Microsoft・Mozilla等の幅広い企業によるコンソーシアムが共同で開発(FacebookやAppleも後から参画)
  • サンプリング方式が多彩

といったところでしょうか。

もともとが、映像コーデックなので、Netflixなどの媒体にすぐに適用できるのは今の時代にフィットしていますね。

AVIfのデメリットとは?対応状況は?

次世代画像フォーマットと聞いて、気になるのはブラウザへの対応状況ですよね。

参照:https://caniuse.com/?search=avif

フォーマット確認でお馴染みの『Can I use』で確認をしたところ、7月7日現在は『Chrome 85〜』『Opera 71~』『AndroidBrowser 91~』『SamsungInternet 14.0~』あたりが主要な対応ブラウザになっていますね。『Firefox』なども※デフォルト対応の噂は流れていますが、いまだ未対応となったままです。

※Firefoxの詳細構成設定で「AVIFを有効」にすることで、サポートは可能

まだまだ新しいので実装にはブラウザの対応が広がっていくまでには時間がかかると思います。

条件分岐での対応はあり?

ブラウザが対応可能である場合は、『AVIF』を優先させていき、その次に『WebP』、それでもだめなら最後にデフォルトのフォーマットを読み込む流れの条件分岐をお勧めします。

ソースはこんな感じ▼

<picture> <source srcset="img/AVIF画像のファイル名.avif" type="image/avif"> <source srcset="img/WebP画像のファイル名.webp" type="image/webp"> <img src="img/デフォルト画像のファイル名.jpg" alt="Description of Photo"> </picture>
コード言語: HTML、XML (xml)

このように条件分岐することで、ブラウザが対応可能な場合は次世代フォーマットを適用していけるので、ぜひトライしてください。

どうやってAVIF形式で画像を生成する?Photoshopは対応可能?g

こちらもお馴染み『Squoosh』

Google Chrome Labが開発した画像圧縮ができる『Squoosh』を利用しましょう。

MozJEPGやWebP、AVIFなどに対応可能です。

▼Squoosh

https://squoosh.app/

Windowsで使用可能な『paint.net』ではAVIfフォーマットの画像を編集できるようです。

しかし、保存はサポートされていないようで、まだまだ時間はかかりそうですね。

また残念ながら、Photoshopでも対応はしていません。

まとめ

まだまだ、本格的な実装までには、課題が残るAVIF形式ですが、Webpを超えてくるポテンシャルは秘めているのでこれからの発展に期待ですね。

私も、まだまだ試し途中なことも多く不完全な部分も多いので、実際に使用してみて色々なケースで検証をしていけたらと思います。

この記事が多少なりとも、お役に立てばと思います。
記事を読んで不明な点等がありましたらお気軽にTwitter(@kaznak_com)などでご質問ください。

ではまた。

中村 一浩
中村 一浩
株式会社ココログラフ代表。SEO歴13年、対策実績970サイト以上。検索エンジンだけでなく検索ユーザーにまで最適化する、SEOの上位互換サービスSUOを提供。SEO / SUOの独自レポートツール、サチコレポート開発者。著書『現場のプロが教えるSEOの最新常識』
中村 一浩
中村 一浩
株式会社ココログラフ代表。SEO歴13年、対策実績970サイト以上。検索エンジンだけでなく検索ユーザーにまで最適化する、SEOの上位互換サービスSUOを提供。SEO / SUOの独自レポートツール、サチコレポート開発者。著書『現場のプロが教えるSEOの最新常識』