次世代型の画像フォーマットAVIFファイルを使ってみた感想【フロントサイドエンジニアにおすすめ】

AVIFファイルとは？

AVIFファイルとは、端的に言ってしまえばJPGやGIF、PNGファイルなどに代表される画像ファイルの形式の1つです。AV1 Image File Format の略でAVIFとなり、AV1は動画用のファイルフォーマットの1つです。

対応ブラウザ

次世代の画像フォーマットのため、ブラウザで対応していなければ表示できないためAVIF画像を導入しても意味がありません。

2022/9/2時点では、公式サイトの発表によれば70％のブラウザで対応しているようです。Androidのブラウザや、Google Chrome、Edge、Fire Foxは対応済みです。iOSは、16から対応となるため、iPhoneユーザーで古い機種やOSが15までの方は残念ながら表示されません。

そのため、現時点ではどの層をターゲットにしているかによって、AVIFを導入するか否かは検討段階といったところでしょうか。

スマホやPCでAVIF画像を扱う

デフォルトのままでは、表示できません。PCユーザーであればChrome経由であれば表示可能ですが、Windowsのデフォルト画像アプリの『ペイント』や『フォト』といった使い慣れたアプリからでは、そのままでは開けません。

上記の画像のように拡張機能をインストールするように求められます。

またブロガーの方で、Wordpressを使用中の方も注意が必要です。デフォルトの設定のままでは、AVIFダッシュボードからは直接アップデートできません。Function.phpにアップロードできるように調整する必要があるため、このあたりの作業に不慣れな方は特にご注意ください。

ちなみに、Wordpressの管理画面（ダッシュボード）からAVIFファイルをアップロードできるようにするソースコードは、AVIF公式サイトから入手できます。
記述するコードは

    
    function allow_modern_images( $mime_types ) {
   $mime_types['heic'] = 'image/heic';
   $mime_types['heif'] = 'image/heif';
   $mime_types['heics'] = 'image/heic-sequence';
   $mime_types['heifs'] = 'image/heif-sequence';
   $mime_types['avif'] = 'image/avif';
   $mime_types['avifs'] = 'image/avif-sequence';
   return $mime_types;
  }
  add_filter( 'upload_mimes', 'allow_modern_images');
    

上記をまるまるコピーして、Wordpressのfunction.phpに記述するだけでOKな様です。PHPに不慣れな方は、バックアップをとってから作業することをおすすめします。

対応する画像ソフト

現状は、最新バージョンの Adobe Illustrator であれば、無条件で開くことができました。Adobe Photoshop では拡張機能のプラグインをインストールしないと開けません。

私のPC環境ではアドビ製品でまかっているため、上記の対応でAVIFファイルを使用できるようになります。

PhotoshopのAVIFプラグインをインストールする方法

公式サイトからGithubへのリンクがあります。

• Githubへ
  上記ページへアクセスします。
• Releasesページへ行きます。
• パソコンのバージョンに合ったzipファイルをダウンロードします。
• ファイルを解凍してPhotoshopのプラグインページへ Av1Image.8bi という名前のファイルをインストールします。
• Photoshopのプラグインのファイルパスは、C:\Program Files\Common Files\Adobe\Plug-ins\CCなど、OSや環境に準じたところにあります。
• インストールすると、確認を求められるのでOKして実行するだけで完了です。

Photoshopのプラグインをインストール完了しても、『Web用に保存』には対応していないため、別名で保存からAVIFファイル形式を選択すると、AVIFで保存できます。

AVIFに関する情報

AVIFの公式サイト（※英語のサイト）にて、諸々の詳細情報を確認できます。

公式サイトでは、WEB上から無料でAVIFファイルへの変換が可能なので、各種ソフトが無い方でも、気軽にAVIFファイルを使用できます。

またこのサイト上で、JPGとAVIFの比較画像がアップロードされているので、検証することもできます。

JPGとAVIF画像を比較

一番気になるJPGとデータ比較をしていきます。フリーフォトを使って検証してみました。

おそらく多くの方にとって、見た目上ではその差はわかりません。先ずはここが重要ポイントです。

ファイルサイズ比較

上記画像のオリジナルサイズは、1920×1280ピクセルのフルHDサイズとしています。

• JPG画像：2.26MB
• WEBP画像：463KB
• AVIF画像：425KB

AVIFに切り替えるだけで、約1/5程度にまでファイルサイズが軽量化されています。特筆すべき点として、WEBPよりも更に軽量が実現しています。

拡大画像の比較

検証のため、画像を拡大して比較してみました。

Photshopを使って、拡大した画像をキャプチャして上下に並べています。700倍に拡大したところ、JPGの方が若干滑らかさを保っている印象ですが、AVIFとの差はそこまでありませんでした。

この差をどのように捉えるかはWEBサイトの管理者次第ですが、私個人の意見として、いちフロントサイドエンジニア側の意見としては、この程度の差で軽量化できるのであれば、積極的に導入すべきだと思いました。

アルファ付きPNGファイルからの変換時の注意事項

AVIFには、PNGファイルのように透過させることができます。JPGだと白く塗りつぶされるところ、PNGファイルはアルファチャンネル（透明度の設定）が使えるため、WEBデザイン等で色々と使われています。

AVIFファイルにもこの機能が使えるため、PNGファイルから切り替えることも可能ではあります。

しかしながら、私が試した限りでは、透過PNGからAVIFに切り替えたところ、ファイルサイズが増えました。もしかしたらたまたま私の会社で使用している透過PNGがそうなっただけかもしれません。ちなみに弊社のHPで使用しているロゴでテストしてみました。

Cross Marketing Technologyのロゴデータ

PNG画像：6.92KB

AVIF画像：15.8KB

上記のような結果となったため、全てのアルファ付きPNGファイルでは該当しないかもしれませんが、PNGからのAVIF変換時にはご注意ください。

結論

特にiOSユーザーへの対応がまだな点とOSのアップデートに依存するという懸念点を除けば、AVIFファイルは大いに有用だと思いました。

ポイントとしては、WEBP画像よりも更に軽量化できることです。WEBサイトで画像を軽量化する目的は、その多くは高速表示を意図したものだと思っております。

特にモバイルファーストインデックス以降、スマホサイトの表示速度は、ユーザーの直帰率だけでなくSEO的な観点からも重要視されています。

多くの画像を表示させるサイトは特に、一般的なサイトでさえも、色々な工夫を凝らして「サイトを高速表示させるには？」を意識してきたエンジニアの方も多くいるはずです。その苦労が改善されるだけでも、導入してはいかがでしょうか？

こんな方にはおすすめかも！？

PCアクセスがメインのサイトやPCページ用のデータがあるサイト

コーポレートサイト運営者で、スマホではなくPCからのアクセスが多いサイトには有用かと思いました。このようなケースは、同業他社からのアクセスがメインとなるため、一般的なサイトでは当てはまりません。PCサイトとスマホサイトを切り分けているのであれば、PC版だけでも切り替えるのはありかなと思いました。

現状、iOS15のユーザーも多くいると思われるので（私もその一人）、iPhoneユーザーには画像を表示できないリスクはかなり高いため、現時点での導入は見送るべきでしょう。

WEBPを多用しているサイト

既にWEBPを使用しているサイトであれば、それをAVIFに切り替えるだけであり、既にJPG等からWEBPに変換するという作業を経験しているので、AVIFに切り替えるだけという点でも、導入へのハードルが下がるかと思います。