AVIFをGoogle検索でサポート開始

2024年8月30日にGoogle検索でAVIFがサポートされるファイルとなったことをX（旧Twitter）でアナウンスをしました。
そもそもAVIFって何？と思った方もいらっしゃるのではないでしょうか。この記事ではAVIFに関する内容を紹介していきます。

AVIFとは

AVIFとは画像ファイル形式です。2024年時点で「次世代」の画像ファイル形式になります。
何が次世代かというと、現在よく使われている画像圧縮形式であると比較して「JPEG」よりも50%以上、「Webp」よりも30％以上のファイルサイズの節約になるそうです。
AVIFはその圧縮技術により、優れた圧縮率を得られ、画質の品質が良いとされています。このAVIFはAlliance for Open Media（AOMedia）という団体が開発し、創立メンバーは「amazon」「Apple」「CISCO」「Google」「Intel」「Meta」「Microsoft」「mozlla」「NETFLIX」「nVIDIA」「SAMSUNG」「Tencent」になり、「コーデックに不可欠な特許をロイヤリティフリーでライセンス供与して、永続的なエコシステムを構築していく」いうミッションを掲げています。

AVIFのメリット

ファイルサイズが小さくできる

AVIFは高い圧縮率のため、画像のファイルサイズを小さくすることができます。小さくできるということは、画像ファイルのダウンロードが早くなり、表示速度が上がるため「Webサイトの表示速度向上」に寄与できる可能性が高いということになります。

アニメーション対応

画像のアニメーションといえばGIFでしたが、AVIFでもアニメーションの対応が可能になりました。
AVIFは小さいファイルでかつ、画質を損ないにくいため、MP4など重い動画をAVIFの短尺にして表示するなど、さまざまな活用方法が考えられそうですね。

透過処理ができる

AVIFはアルファチャンネルの情報を持つため、「透明」を扱うことが出来ます。アルファチャンネルとは色から透明な要素を切り離した情報を保有するチャンネルであり、代表的なものとしてはPNG形式は透過できるが、JEPG形式は透過できないなど制約があります。

元画像データに復元可能

AVIF形式は可逆圧縮（ロスレス圧縮）、非可逆圧縮の両方に対尾いしています。JPEGは高い圧縮率ができる非可逆圧縮のため、データを削る割合が大きく元の状態に戻すことはできません。
可逆圧縮の場合は圧縮率は低いので、ファイルサイズはそこまで小さくなりませんが、元に戻すことが可能です。Webサイトではページスピードの兼ね合いで軽量ファイルにすることが多く、画像の圧縮率が高く、画質が悪くなりにくいAVIFは使い勝手の良い形式といえるでしょう。

AVIFのデメリット

非対応ブラウザがある

2024年9月2日時点では対応してないブラウザがあり、統一されてこの形式がサポートされていない点に注意をしましょう。対応していないブラウザについては後ほど紹介します。

Google検索でAVIFをサポート

Google Search Centralの記事「Supporting AVIF in Google Search」にてGoogle検索、Google画像検索など、画像を使用する検索上でサポートされるファイル形式になりました。
本文には「特別にインデックスする操作は必要ない」と記載されていますので、AVIFをすでに利用しているWebメディアは画像検索で確認が出来ると思います。下記に日本語訳を記載しておきます。

近年、AVIF はウェブ上で最もよく使用される画像形式の 1 つになりました。AVIF がGoogle 検索、Google 画像検索、および Google 検索で画像を使用するあらゆる場所でサポートされるファイル形式になったことをお知らせします。AVIF ファイルを Google にインデックス登録してもらうために特別な操作を行う必要はありません。

AVIF形式のインデックスを確認

画像検索でAVIF形式に絞って検索してみたところ、AVIFの画像がインデックスされているようです。

AVIFの画質を比較

PNG画像、jpg画像、Webp画像、AVIF画像を1024px × 1024pxで並べてみました。画像はsquooshでQuality75で変換しています。見比べてみると違いが分かるかと思います。

png画像

jpg画像

Webp画像

AVIF画像

画像容量の違い

今回掲載した画像は以下の容量になります。高い圧縮率と記載の通り、AVIF画像は同じ画像形式の中でも軽量です。
他にも数点画像をAVIF、JPG、Webpにして試しましたが、試した画像はすべて下記のような結果になりました。

PNG画像： 1,436,391 バイト（1.36 MB）
JPG画像： 108,406 バイト（105 KB）
Webp画像： 82,808 バイト（80.8 KB）
AVIF画像： 51,951 バイト（50.7 KB）

AVIFの書き出し方

AVIF画像を作成する方法は2つありますので紹介します。詳しい情報はcodelabs.developers.google.comで確認することができます。

SquooshでAVIF画像を作成

Googleのが開発したオープンソースの画像圧縮ツールです。Githabでソースが公開されており、ブラウザ、またはインストールして利用することができます。

avifencを使ってAVIF画像を作成

画像をAVIF画像に変換できるコマンドライン・アプリケーションを使ってAVIF画像を作成することも可能です。作成する画像点数が多い場合はコマンドラインエンコーダーであるavifencを利用することをおすすめしています。

書き出した画像をHTMLに入れる

pictureタグを使ってソースファイルに記述します。AVIFファイルがブラウザでサポートされていない場合は代わりにjpg画像が表示されます。

<picture>
　<source type="image/avif" srcset="/hoge/sample.avif" alt="avif画像">
　<img src="/hoge/sample.jpg" alt="jpg画像" />
</picture>

WordPressなどのCMS利用時の注意

WordPressなどのCMSでは管理画面から画像をアップすることができるものがあります。CMS側でサポートされていない形式の場合は管理画面からアップロードができないため、FTP、SSHでファイルをアップロードする必要があります。
このあたりはサーバへの接続権限を持たない場合に大きなハードルになりそうです。

AVIFに対応しているブラウザ

現時点で多くのブラウザでサポートされています。AVIF画像を使うにあたり問題はなさそうです。
もしAVIFをレンダリングできなかったとしてもpicthreタグを使って対応していない場合の代替画像拡張子で表示することが可能なため、AVIFを使うにあたり大きな問題はなさそうです。

日本で使われているブラウザシェア

日本で使われているブラウザのシェアを見てもサポートされているブラウザの利用率が高いため、AVIFの利用で懸念する必要なさそうです。
どうしても気になる場合は、自社サイトに入れているアクセス解析ツールで利用ユーザーのブラウザを確認すると良いでしょう。

画像をAVIFに変更する場合はリダイレクト設定する

いま利用している画像をAVIF画像に変更する（拡張子が変わる）場合は必ずリダイレクトの設定を実施しましょう。
Google Search Centralの記事内でも明記されています。永続的にファイルを変える場合は301リダイレクト、一時的に変更する場合は302リダイレクトにします。
ここでは詳しい設定方法は記載しませんが、.htaccessを触る場合は必ずバックアップをした上で変更をしましょう。

まとめ

いかがでしたでしょうか。今回は画像ファイルフォーマットAVIFについて紹介しましたが、画像はサイトのページ速度に大きく影響する要素のひとつです。
Webpも十分軽量と感じていましたが、さらに軽量な画像ファイルを使うことで、どの程度ユーザーに影響するのか、検索エンジン上の影響はあるのかなど効果測定をするのも面白そうです。

0円からはじめるWebマーケティング