アニメーション画像のファイルサイズによる比較

従来からアニメーションさせることができる画像フォーマットはGIFが有名ですが、現在では色々なタイプのフォーマットでアニメーション画像を作ることができます。

フォーマット	ファイルサイズ
GIF	約1MB
WebP	約300KB～500KB
AVIF	約100KB～300KB

ぐらいと言われています。もちろん使用する色数やピクセルサイズ、時間、フレーム/秒の設定等によってサイズは変わりますが、目安としてこれぐらいと言えます。

ここから考えられることは、avifでアニメーション画像を作り、それをwebpでフォールバックすればほとんどのブラウザに対応していて、よほど古いブラウザに対応させる必要がある場合にのみGIFを使えば良いとも言えます。

フォールバックのやり方

<picture>
    <source srcset="example.com/images/test.avif" type="image/avif" />
    <img src="example.com/images/test.webp" alt="テスト画像" />
</picture>

このような感じで書けます。

意味合い的には、avifで表示したいわけだけども、もしブラウザが対応していない場合はwebpで表示するという感じです。

この場合のimg要素は、画像のサイズやその他の属性と表示方法を記述できます。

これらはpictureタグの中にimgがあるのでpictureが親要素になると思う方もいるかも知れませんがpictureタグはコンテナ要素で、imgで使用するためのソースなどをまとめて書いておけるものであるので、上記の例であっても基本的には一般的なimgタグと同じようにして使用します。そのため、もし親要素が必要であれば、pictureタグの外にdivなりを置く必要があります。

最も良い例としては、

<picture>
    <source srcset="example.com/images/test.avif" type="image/avif" />
    <source srcset="example.com/images/test.webp" type="image/webp" />
    <img src="example.com/images/test.jpg" alt="テスト画像" />
</picture>

と書いたら間違いはありません。しかしこのためにはavif、webp、jpgと3つの画像を用意する必要があります。webpはcan i use - webpで見ても、IEと古いsafariだけが対応していないだけで全てのブラウザが対応していますからそれらは無視しても良いと思います。アプリなどでwebpが使えないという場合は泣く泣くjpgを用意するぐらいかと。
can i use - avifでもほぼ同じで、2025年現在avifは使用できる画像フォーマットです。ただしブラウザは対応していてもそれらをローカルで見るためのソフトが対応していない可能性はあります。

ブラウザは対応しているがOS側でサムネイルなどが表示されない可能性はある

ブラウザは基本的にライブラリを自前で持っていると思いますが、OS側ではライブラリが入っていない場合はありえます。
windowsではMicrosoftストアでAV1 ビデオ拡張機能(av1-video-extension)を検索すれば良いかと思います。無料の拡張機能です。
macOS Ventura(macOS 13)以降なら何もしなくてもそのままで表示できると思います。

AVIFとは

同じ画質でJPEGやWebPよりもファイルサイズを大幅に小さくすることができます。これによりWebページの読み込み速度の向上や、ストレージ容量の節約に貢献します。

色域も広く(HDRに対応)、高圧縮にしても画質の劣化が少なく鮮明な画像が期待できます。

可逆圧縮と非可逆圧縮の両方に対応していて、アルファチャンネル(透過処理)も対応しているのでPNGのように背景を透過することもできます。

アニメーションに対応しているのでGIFの代替として使用できます。GIFと違うのはロイヤリティーフリーでオープンソースで開発されているため、誰でも無料で使用することができます。

これらから言えること

ファイルサイズを小さくすることができるのでWebページの読み込み速度を向上させることができます。これらは高解像度画像やHDR画像のファイルサイズが大きくなるものはより少ないデータ量で配信することができます。

ファイルサイズが小さいということは、ストレージ容量も軽減できるということになります。

こういうのだけを書くといい事ずくめと思いがちですが短所もあり、Webpと比較したらですがエンコード処理に時間がかかりCPU負荷が高くなる傾向があります。
逆にavifよりもwebpの方がそれらの負荷が軽いと言えますが、avifの方が圧縮効果が高いので、同じようなことができるものの、容量面で言えばavifの方が小さくなり、画像もきれいと考えるとavifの方が良いようにも思いつつ、PCに負荷がかかったりするのであればwebpの方が良いようにも思えたりもします。昨今のPCの性能は上がっているので言うほどでもないかも知れません。

考慮すべきは古い処理能力のPCやブラウザですが、avifもほぼモダンブラウザでは対応しているので2025年現在では積極的に使用していって良いと思います。

AVIFを作成できるソフトウェア

オープンソースで無料なGIMP や有料ですがadobe Photoshopで作成したり、既に元になる写真や他フォーマットで所持している場合は、Squoosh 、Convertio — ファイルコンバーターなどでブラウザ上で変換もできます。
もしエラーなどがでて変換できないと思われた場合はEzgifこちらも試してみて下さい。無料でavifやwebpだけでなくAPNGなどにも変換可能です。

SquooshはGoogleが開発したオンライン画像圧縮ツールです。画質や圧縮率を細かく調整できるため、目的に合ったAVIF画像を作成できます。

これらを使用してavif画像を作成することができます。

他にもKrita などでアニメーション画像を作成することもできます。こちらも無料です。アニメーション画像を描いて作成するのであればGIMPよりこちらの方が良いかも知れません。

世にいうGIF画像の多くはMP4などの切り抜きや編集したものを画像変換して作られていることが多いと思います。それらを使用して元になる動画を作成した上でファイル変換するのが色々簡単でしょうか。

サンプル

全てwindowsのファイルプロパティでディスク上のサイズを参考にしています。通常画像でwebpのサイズが大きくなったのは書き出す設定が最適化されていなかっただけかも知れません。ただjpgファイルはサンプルのような白黒画像ではなく写真のようなものには最適かもしれません。
アニメーション画像に関してはだいたいですが1/10、1/28と大きくサイズを下げることができました。下げられた分だけ高速にページが表示されるということになります。