軽量で高画質、AVIF（.avif）画像の作り方と使い方

画像とサイトのスピードの関係

ウェブサイトのスピードを落とす最大の要因は画像です。

サイトデータの50%以上が画像データであることも珍しくないので、サイズの大きい画像を使っていると表示スピードが落ち、ユーザーに「遅い」「重い」と感じさせてしまいます。

これまでも当ブログでは、画像を軽量化してサイトスピードを上げる方法を紹介してきました。

今回はサイトスピードを向上させる最新の画像フォーマット、AVIFを紹介します。

AVIFフォーマットとは？

まだ一般には馴染みのうすいAVIF（.avif）、正式名称「AV1 Image Format」は、ウェブ画像向けに開発された最新の画像フォーマットで、JPEG（.jpeg）やPNG（.png）と同じような画像の保存形式のことです。

JPEG画像から変換すると、サイズはおおよそ3分の1程度、WebPと比較しても60%ほど圧縮できます。

「高圧縮・高画質」以外のAVIFのメリット

これまで多くの画像フォーマットが、「サイズは小・画質は高」という売り文句を掲げて登場してきました。

例に漏れずAVIFも「サイズは小さく、画質は高い」ことを最大の特徴としていますが、これまでの画像フォーマットとの違いは、IT業界のメインプレイヤーのサポートを受けている点です。

AVIFは動画変換技術のAV1コーデックをベースに開発されました。

元々このAV1コーデックは、ネットで大量の動画配信をする必要から開発されたもので、開発元のAlliance for Open Media（AOM）には、GoogleやFacebook、Apple、Amazon、Microsoftなどの巨大テックカンパニーが参画しています。

つまりAVIFフォーマットはこれらのTechカンパニーのサポートを受けており、これはそのままサポートされるウェブ・ブラウザに関係してきます。

あとで触れる一世代前の画像フォーマットWebP（.webp）が、Safariでサポートされるまでに10年近くかかったように、ブラウザごとの互換性は避けて通れない問題ですが、この点AVIFはすでに高い互換性を得られることが高い確率で約束されている状況といえます。

これ以外にも、オープンソースとしてロイヤリティフリーで開発されていること、HDR（High Dynamic Range）の、より高画質で明度の高いイメージに対応していることなども、AVIFの特徴として挙げられます。

AVIFとWebPの違い

これまでWebP（.webp）がウェブ向けに最適化された画像フォーマットとして推奨されてきました。

WebPについて詳しくはこちらの記事をご覧ください。

しかし開発から10年以上経っているにも関わらず、一般にそこまで認知されておらず、また多くの人に使われているとはいえない状況です。

そんなWebPとAVIFには実は共通点があり、それはどちらも動画変換の技術をベースに開発されたフォーマットであることです。

WebPは動画変換用のVP8コーデックを元に開発されており、これはGoogleの買収したOn2テクノロジー社が開発したものでした。

一方でAVIFは、上でも触れたようにAV1コーデックを元に開発されましたが、AV1コーデック自体がVP10（VP8の後続版）のアップグレードとして作られたものなので、AVIFフォーマットはWebPフォーマットのアップグレード版であるとも言えます。

実際AVIFは、WebPではサポートしていない10 bitと12 bit color depthまでカバーしており、WebPよりもサイズが小さく、さらに高画質の画像を作ることができるようになっています。

新しいフォーマットはいつもブラウザとの互換性が問題になり、上でも触れたようにWebPは、Safariで表示できるようになるまで10年ほどかかりました。

AVIFは2020年中頃からようやく情報が出始めた最新の規格なので、すべてのメジャーブラウザが対応している状況ではありませんが（2021年4月現在）、AVIF開発を進めるAlliance for Open Media（AOM）には、EdgeのMicrosoftやSafariのAppleも参画しているので、WebPのように対応に10年もかかることはないでしょう。

AVIF画像の作り方

AVIF画像を作るには、AVIFエディターと画像コンバーターの2つの方法があります。

AVIFエディターはPhotoshopのような専用アプリケーションを使ってAVIFを作る方法ですが、Photoshopは現時点ではAVIFに公式には対応しておらず使い勝手が悪いので、画像コンバーターを使って、既存のJPEG画像やPNG画像などをAVIF画像に変換するのがもっとも手軽な方法になります。

Googleの開発したSquooshは、AVIFをはじめとする多くの画像フォーマットに対応していて、直感的に使うことのできる便利な画像変換サイトです。

• https://squoosh.app

AVIF画像の使い方

上記の通り、AVIF画像はまだすべてのブラウザでサポートされていないので、サイトで使う時には注意が必要です。

AVIF画像を直接<img>タグで読み込むのではなく、<picture>タグを使って次のように書きます。

<picture>
    <source type="image/avif" srcset="./images/dog.avif">
    <img alt="My dog" src="./images/dog.jpg">
</picture>

こうすることでAVIFに対応していないブラウザでは自動的に.jpgのJPEG画像が表示されるようになります。

AVIFを使う時の注意

AVIFを使う時は、まずブラウザの対応状況に気をつけましょう。

こちらを見ればわかるように、現時点（2021年4月）ではGoogleクロームとFireFoxでサポートされているだけで、SafariとEdgeは未対応になっています。

そのため上で解説したように<picture>タグで読み込むのが必須になります。

また、AVIFはあくまでもウェブサイトでの表示に使われるものであって、JPEGやPNGといった既存の画像フォーマットを置き換えるものではないので、オリジナルとして汎用的なJPEN画像などを別に持っておきながら、ウェブサイト向けにSquooshなどを使ってAVIF画像を書き出すといった方法が今後も当分は続いていくことになると思います。

とはいえ、AVIFと同じようにウェブサイト向けの画像フォーマットであるWebPを使うメリットは今後確実に低くなっていくので、画像の多いサイトなどではAVIFフォーマットへの変換を徐々に進めていくのがいいでしょう。

イラストを使う時の注意点

多くのウェブサイトのロゴやイラストではPNG形式が使われていますが、軽量で扱いやすいSVGを使う方がサイトのスピードは上がります。

SVGはAVIFよりも軽量で、またどんなに拡大しても劣化しないので、ロゴやイラストにはSVGを使うようにしましょう。

SVGについてくわしくは次の記事で紹介しています。