JPEGやPNGだけじゃない？新しい画像形式WebPとAVIF

2021年現在、Webで主流の画像形式としてJPEG、GIF、PNG、SVGなどが挙げられます。
これらの画像形式について、今一度特徴を確認してみましょう。

JPEG（Joint Photographic Experts Group - ジェイペグ）は歴史が長い画像形式の一つで、非常に多くの色数を扱う写真や、複雑な静止画などに向いた画像形式です。
余剰な情報を削除することで圧縮する方法（非可逆圧縮）を用いることで、軽量なファイルサイズを実現しています。
余剰な情報を削除することで、画質が多少悪化します。一度の圧縮ではわからないこともありますが、何度も保存を繰り返すと目に見えて画質が悪くなる点が欠点です。

圧縮の過程で色を混ぜ合わせてしまうため、図形やイラストなど、明確な色の境界線がある画像には向きません。

GIF（Graphics Interchange Format - ジフ）はJPEGと並んで歴史が長い画像形式です。
256色しか扱えない代わりに圧縮率が高いこと、JPEGでは扱えない透明色も扱えることが特徴です。
特に同一色が連続するほど圧縮率が高くなるため、イラストやアイコンなどの使用色数の少ない画像への使用に適しています。

また、複数画像を一つのファイルに収録することでアニメーション実現することができます。
一時期は1px四方の透過GIFを用いてレイアウトを調整することもありましたが、後述するPNGやSVGの台頭や、CSSの発達により以前よりWebサイトなどで使われることは減りました。

PNG（Portable Network Graphics - ピング）は、GIFに替わる画像形式として登場しました。
256色しか扱えないGIFに対して、JPEG同様フルカラー（1677万色）が扱え、GIFでは一色しか扱えなかった透明色も、RGBの3色のチャンネルと同様にアルファチャンネルを持つことで半透明を扱えるようになりました。
JPEGで使用される非可逆圧縮ではなく、画質が劣化しない可逆圧縮を用いているため、何度保存しても画質が劣化することはありません。

一方で、GIFで扱えていたアニメーションには非対応であり、JPEGよりもファイルサイズが5〜10倍程度重たくなる傾向にあります。
画質の劣化が起きないため、JPEGが苦手としてるテキストや線画など、明確な色の境界線がある画像に適しています。

SVG（エスブイジー）はScalable Vector Graphicsの略です。上記3つの画像形式はラスター形式なのに対し、SVGはベクター形式になります。
ラスター形式はピクセルごとに色情報が記録されているのに対し、ベクター形式は四角や円などの図形の座標、位置などが記録されています。
そのため拡大縮小に強く、画質が劣化しないことが特徴として挙げられます。

SVGはXML形式で書かれていることも特徴です。テキストエディタで編集することが可能で、CSSやJavaScriptを用いることで動的に図形を変化させたり、アニメーションやクリックイベントなどの設定ができます。

一方で、写真のように複雑で繊細な配色や輪郭の画像描画には適していません。また、ラスター形式の場合は画像の縦横サイズによってファイルサイズが大きくなる傾向にありますが、ベクター形式の場合はテキストファイルのため、複雑な図形など、情報量が多くなるにつれてファイルサイズが膨大になる傾向にあります。
比較的シンプルなアイコンや図形であれば、他の画像形式よりも軽量で高品質な表現ができます。

現在Webでは、写真はJPEG、図形や透過画像はPNGやSVGというように使い分けがなされています。

Googleが開発しているラスター形式の静止画フォーマットで、「ウェッピー」と読みます

An image format for the Web

WebPを使用することで、JPEGやGIF、PNGなどで使い分けていた画像を一つに置き換えることができます。
画質を落とす非可逆圧縮と、画質を落とさない可逆圧縮のどちらも扱うことができ、非可逆圧縮した画像はJPEGと比較して25〜34%小さく、可逆圧縮画像はPNGと比較して26%小さくなると謳われています。
22%のファイルサイズ増加で透過画像も扱え、アニメーションにも対応しています。

2010年に仕様が公表されて以来、対応ウェブブラウザは徐々に増え、2020年9月リリースのiOS14がWebPをサポートしたことで主要なモダンブラウザは一通り対応しました。

WebP image format | Can I use...

AVIF（AV1 Image File Format）は、映像コーデックの一つであるAV1を用いたラスター形式の画像です。
AV1はNetflixやAmazon、Google、Microsoft、Mozillaなど幅広い企業が共同で立ち上げた、オープンでロイヤリティフリーのストリーミング向けコーデックの開発を目的とした非営利団体AOMedia（ Alliance for Open Media）によって開発されています。
WebPよりもさらに圧縮率が高く、より幅広い色域を扱うことができるHDRに対応した次世代の画像ファイルフォーマットです。

対応ブラウザはまだ少なく、Google Chromeでは2020年8月リリースのChrome85から、Firefoxでは77以降、オプションを有効にすることで部分的に対応している程度です。
また、AV1コーデック自体も発展途上のため、手軽にエンコードできる環境が整っていません。エンコード自体の速度が遅いという問題点も指摘されています。
しかし、主要なブラウザベンダーが参加していることからも、近い将来、WebPや他の画像ファイルフォーマットを置き換える可能性があり、今後の動向が注目されます。

AVIF image format | Can I use...

さて、WebPやAVIFをWebで使用したい場合、どのように使用していくのが良いのでしょうか。

WebPは主要なモダンブラウザは対応したと言っても、全ての人が最新のOSでモダンブラウザを使用しているとは限りません。全ての足並みが揃うまで待っていると、AVIFのような新しい形式が普及し始めているかもしれません。
そのため、複数の画像形式を用意し、閲覧環境によって最新の画像形式で表示するのが理想と言えるでしょう。

では、その複数の画像をサポートする方法を、WebPを例に作成方法と表示方法の2段階に分けて見ていきましょう。

WebP画像の作成タイミングは大きく分けて3つあります。

Photoshopは長らくデフォルトでは対応していませんでしたが、2022年2月にリリースされたPhotoshop 23.2からサポートされ、編集・保存ができるようになりました、
デザイナーが画質とファイルサイズを見ながら調整できるので、トップページのメインビジュアルなどサイトの中でも重要でこだわりたい部分では、この方法で作成するのがよいでしょう。

一方で、一枚一枚調整し保存するのは手間がかかってしまいます。

多くの画像を変換する必要がある場合は、エンジニアがビルドなどのタイミングで一括変換してしまう手があります。
ffmpegを用いることで、コマンドラインでWebPへの変換を行うことができます。オプションを設定することで圧縮率などを変えることもできます。

また、npmにも画像の変換ライブラリは多数提供されているため、それらを用いて簡単にビルド時に一括変換することもできます。

しかしこの場合、一つ一つの圧縮率を細かく設定することはできません。
変換された画像の画質とサイズのバランスを確認しながら、圧縮率などの設定を行うと良いでしょう。

なおこの時、変換前の画像はできるだけ圧縮前の画像を使用しましょう。圧縮済みの画像からさらにWebPへの変換を行うと、大抵の場合画質が悪化してしまいます。
できるだけオリジナルの高画質画像を元に変換するようにしましょう。

さて、静的に表示される画像は上記の対応で問題ありませんが、ユーザーがアップロードした画像や、CMSを使うことで動的に追加される画像には対応できません。それらの画像にも対応する場合、サーバーサイドでの実装が必要になります。

FirebaseのCloudFunctionsなどを用いることで実装できますが、この方法はサーバーサイドの知識が必要な上、クラウドサービスを使用するためコストがかかり、障害への対応など考慮が必要なものが増えてしまいます。サイトの規模や動的コンテンツの数、チームのスキルや運用体制を考慮した上で決めるのが良いでしょう。

最近では、imgixのような画像配信CDNでも、パラメータを設定することでWebPに変換、配信することができます。
国産のヘッドレスCMSであるmicroCMSではimgixと連携しており、CMSに登録した画像をWebPで配信することができます。

画像が用意できたら、今度は画像の表示方法です。

一番簡単なのはpicture要素を用いることで、ブラウザ側が読み込む際に最適な画像を選んで読み込んでくれます。対応していない画像形式は読み込みを飛ばすので、IEのようなWebP非対応ブラウザはimg要素で指定したjpg画像を読み込みます。

<picture>
    <source srcset="img/photo.avif" type="image/avif">
    <source srcset="img/photo.webp" type="image/webp">
    <img src="img/photo.jpg" alt="Description of Photo">
</picture>

CSSのbackgroundなどで指定している画像についてはCSS側でpicture要素のような判別ができません。
Modernizrなどのライブラリを読み込むことで、WebP対応環境と非対応環境で出し分けをすることができます。

Modernizr

読み込んだ画像のDataURI形式によって対応しているか判断しているため、ライブラリを用いず、同様の処理を実装することで対応しても良いでしょう。

また、画像変換時と同様、サーバーサイドで表示を切り替えることも可能です。

リクエストのAcceptヘッダーを読み取り、WebP対応であればWebPを、そうでなければJPEGを返すように切り替える方法で実装ができるでしょう。
こちらの方法については以下のサイトで詳しく説明がされているので参考にしてはいかがでしょうか。

次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA

長らくJPEGやPNGなどの画像形式が使われてきましたが、今後はWebPやAVIFのような画像形式が主流になって行くと思われます。今後の動きに注目していきたいですね。