[2022-09-26 更新]
2021 年 10 月にリリースされた Firefox 93 に気になる機能追加がありました。それは画像フォーマット AVIF のサポートです。そして 2022 年 9 月にリリースされた Safari 16 にも AVIF がサポートされました。AVIF の普及はいよいよでしょうか？
AVIF って何？
AVIF とは何か？についてはネット上で語りつくされていますが、ここでは簡単にまとめておきましょう。
まず AVIF とは画像フォーマットのことです。JPEG や GIF といった類です。近年では WebP も話題になり、すでに多くのウェブサイトでも使われるようになりました。AVIF はさらに新しい画像フォーマットです。 新しいからには他の画像フォーマットと比べて、いろいろな面で優秀です。
- 同じ画質ならよりファイルサイズが圧縮できる（JPEG の半分くらいになる場合もあるそうです）
- もちろん、アニメーションもサポート
- 色深度は 12 ビットまで対応しており、HDR をサポート
そのほかにもいろいろと特徴があるようですが、一般的なウェブサイトでの利用においてメリットを大きく感じられるのは以上の 3 つでしょう。これらメリットだけでも、もう使いたくなりますよね。
AVIF は Alliance for Open Media という団体が開発した画像フォーマットです。実は、Apple、Google、Microsoft、Mozilla は、この団体の設立メンバーでもあります。そのため、どのブラウザーベンダーも AVIF に否定的ということはないでしょう。
AVIFファイル生成方法
手っ取り早く AVIF を試したい人は、avif.io がお勧めです。JPEG などの画像ファイルをドロップすると AVIF 画像に変換してくれます。クラウドで処理しているのではなく、ブラウザーで処理しています。変換する画像をどこにも知られたくないなら、ブラウザーで処理してくれるツールが重宝しますね。
クラウドを使わずにブラウザーで変換処理するサービスとしては、WebUtils Compress Images Online もおすすめです。
アニメーションを試したいなら、Animated AVIF maker が使えそうです。
サポートブラウザー
2022 年 10 月現在、AVIF をサポートしているメジャーなブラウザーは Chrome、Safari、Firefox です。Microsoft Edge は Chromium ベースなのになぜか未だに AVIF をサポートしていません。
アニメーションは、Chrome はすでにサポート済みです。Safari は 2022 年 10 月にリリースした 16.1 でサポートされたとありますが、私が試したところなぜかレンダリングされませんでした（理由は謎です）。Firefox はまだアニメーションをサポートしていません。
最新のサポート状況はこちらを見てください。
マークアップ
AVIF 画像を使う場合、HTML は次のように書くのが望ましいと言われています。
<picture>
<source srcset="pic.avif" type="image/avif">
<img src="pic.jpg" alt="">
</picture>
picture 要素は複数の画像フォーマットを source 要素に指定することができ、ブラウザーはそのうちサポートしている画像フォーマットを選択してレンダリングします。source 要素に指定した画像をレンダリングできない場合は、フォールバックとなる img 要素をレンダリングすることになります。
はっきり言って、いろいろメンドクサイですよね。マークアップは増えるし、画像ファイルは少なくとも 2 つ用意しないといけません。であれば、JPEG だけで良いよね、って思ってしまうのは私だけではないでしょう。
現時点で考慮すべきメジャーブラウザーは Edge のみとなります。Edge を考慮しなくても良いスマートフォン向けウェブサイトであれば、フォールバックなしに AVIF を使うことができます。
AVIF が普及するかは画像編集ソフトのサポート次第
前述の picture 要素を使ってまで AVIF 画像を使わなければいけないウェブサイトは非常に限定的ではないでしょうか。よほどアクセスが多く、画像のファイルサイズの低減が大きな効果を生むのでない限り、一般的なウェブサイトで AVIF を使うメリットが感じられません。
Google が開発した WebP がいまだにさほど普及していない点が気になります。一部の大手サイトでは WebP が使われていますが、中小のウェブサイトまで普及しているかと言われると、そこまで普及はしていないのではないでしょうか。
というのも、Safari 以外のブラウザーは WebP をいち早くサポートしたにもかかわらず、Safari が WebP をサポートしたのは iOS で 2021 年 9 月のことです。そして、MacOS の Safari の WebP サポートは、2021 年 11 月にリリースした Big Sur を待たなければいけませんでした。
さらに、ウェブサイト制作で良く使われている Adobe Photoshop はなかなか WebP をネイティブでサポートしてきませんでした。これも WebP 普及の遅れを助長していたのではないでしょうか。なお、Adobe Photoshop は 2022 年 2 月にリリースされたバージョン 23.2 でやっと WebP をネイティブでサポートしました。
Edge が AVIF をサポートした暁には、徐々に大手ウェブサイトから AVIF が普及するでしょう。しかし中小のウェブサイトでの普及を考えると、メジャーなフォトレタッチなどの画像ソフトウェアが AVIF をサポートしないといけませんね。
まとめ
2021 年 10 月に Firefox 93 が AVIF をサポートしたことで AVIF がより注目され、さらに、2022 年 9 月にリリースされた Safari 16 によって AVIF の普及に一歩近づきました。Edge も AVIF をサポートし、picture 要素を使わずに AVIF をウェブページで気兼ねなく使えるようになると良いですね。
Adobe Photoshop などの画像編集ソフトが早い時期に AVIF をサポートすれば、もしかしたら WebP より普及するのかもしれません。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
