WebPよりも軽いAVIFとは?最強の次世代画像フォーマットの解説と作り方

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

現在では『WebP』がブラウザの対応も浸透し、最も使いやすく圧縮率の高い画像フォーマットとなっています。

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

AVIFとは?

HDR(ハイダイナミックレンジ)カラーをサポートしているので、アルファチャンネルやアニメーションにも対応可能。

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

jpgと比較すると約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対応が可能である場合はできるだけAVIFを優先させていくことをお勧めします。

pictureタグを使用すれば簡単に実装で来ますね。

まずはAVIF、その次にWebP、それもだめなら最後にjpg・pngなどの順番でを読み込む流れがよろしいかと思います。

pictureタグでの設定例
<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は対応可能?

我々の中でお馴染みの『Squoosh』

Google Chrome Labが開発した画像圧縮ができる『Squoosh』の利用がおすすめです。

既存のjpgやpngの画像を放り込むだけで簡単いAVIFへの変換が可能です。

AVIF以外にも、MozJEPGやWebPなどに変換が可能です。

Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your bro…

他にもWindowsで使用可能な『paint.net』ではAVIfフォーマットの画像を編集できるようです。
しかし、保存はサポートされていないようで、まだまだ時間はかかりそうですね

執筆時点では、Photoshopですらも対応していません?

画像の一括置換ならこちらもご覧ください

上記の「sqoosh」では、コマンドラインを使用してフォルダの画像を一括置換することが可能です。

ターミナルアプリを使用するので、少し文章だけ聞くと難しく感じますが、わかりやすく記事にまとめましたので、ぜひこちらをご覧ください。

SEOの画像最適化を一括で超簡単に行う方法【squoosh-cli】
SEO施策を行う上で、表示速度の重要性が高まっていますが、表示速度を改善するためには、Webページ全体の容量を削減することが重要で、容量に占める画像の割合は非常に高いため、画像の最適化は優先度が高いです。 今回は、そんな画像の最適化を効率よく行う方法をご紹介します。

まとめ

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

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

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

ではまた。

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

Webのマーケティングに関することなら
お気軽にご相談ください

株式会社ココログラフ / cocorograph inc.
〒150-0002
東京都渋谷区渋谷2-19-15 宮益坂ビルディング203
mail: [email protected]
tel: 050-1748-9550
url: https://cocorograph.co/

© 2021 cocorograph Inc.