恐れずに次世代画像フォーマットWebPおよびAvifを使おう

こんにちは
6月でプライド月間の途中になりますが、それを無理やりサブテーマにした記事です。

概要

<picture>要素を使って、互換性を担保した次世代画像フォーマットをWebサイトで使う方法を紹介します。

次世代画像フォーマットとは

従来、Webサイトに表示される画像のフォーマットがjpegもしくはpngです。PNGもありますが、画像というよりはベクトルという別物として認識するべきかと思います。

jpegとpngは実は非常に古い画像圧縮技術でありjpegは1992年、pngは1996年に発明されましたが、90年代と今は表示する画像の解像度が桁違いと言っても過言ではありません。実際、桁違いなのです。

そこで、現代の画像の欲求とWebサイトで表示されることを前提に、次世代の画像圧縮技術が開発されました。Googleが2010年、開発に着手し、2018年に最初のWebP規格を公開しました。残念ながら、Googleが主体的に勧めたせいもあって、初期はAppleなどからの抵抗があり、なかなか浸透しませんでした。しかし、2020年にAppleもやっとSafariでサポートしてくれるようにもなり、今だと96%の使用中ブラウザが対応しています。

そしてWebPだけでなく、Avifという画像圧縮フォーマットも2019年に規格を公開しました。こちらもWebPとほぼ同じくらい普及していますが、やっと今年（2014年）の1月にEdgeも対応してくれたような状況です。

広くサポートされているから、ほぼそのまま使っても青信号だと言えるのですが、それでもまだ対応していないブラウザがいまだに残っています。

なぜ次世代画像フォーマットを使うべきか

理由は単純です；次世代フォーマットの画像を使うことにより、ユーザーの通信量を減らすことができます。WebPに関して言うと、PNGより25%ほど小さく圧縮できます。

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.

上記の引用でわかるように、透明な部分の圧縮の仕方を改善したことにより場合によってはPNGの3分の一ほどにファイルサイズを縮めることができるそうです。

これはモバイルユーザーにとってリアルなメリットがあるので、ぜひ使える人にはWebPフォーマットで提供して差し上げましょう。

互換性を担保して次世代画像フォーマットを使おう

そこで本題に入りますが、対応していないブラウザにも配慮しながら次世代フォーマットを活用する方法を紹介したいのですが、その秘訣が<picture>要素にあります。

<picture>要素は一つの<img>要素と複数の<source>要素で構成されています。

<img>要素は従来通りの<img>要素でここにalt、widthやheightなどの属性を指定します。

<source>はさまざまな条件下でどのような画像を読み込むか、ブラウザに支持するためのものです。

今回の記事ではあくまでもフォーマットの指定に使うのですが、CSSメディアクエリ、<img>要素のサイズによってどの画像を読み込むかを指定することもできますので、ぜひご覧ください。

実際に使ってみる

実例として、今のLabBase転職のホームページにおいてロゴのHTMLを共有します。

<picture>
    <source 
        srcset="/assets/icons/pride-logo.webp"
        type="image/webp"
    >
    <img 
        src="/assets/icons/pride-logo.png"
        alt="LabBase転職はプライド月間をお祝いする"
        width="244" 
        height="44"
    >
</picture>

レンダーされるのはこちらです：

ただ、開発者ツールでネットワークのリクエストを確認すると、pride-logo.pngではなく、pride-logo.webpがダウンロードされていることがわかります。

正直、画像のサイズ自体をより小さくしたらもっといいのですが、それは次の対策です

まとめ

簡単なご紹介でしたが、このようにして恐れずに次世代の画像フォーマットのパフォーマンス改善を活かして、より優れたユーザー体験を今でも提供できるのです。

ユーザーにとってパフォーマンスは実に大きく重要視されているので、kb数までも削りたいものです。

余談ですが、LabBase転職では国際化対応のみならず、性的マイノリティに配慮した開発を心がけています。例えば、ユーザーから性別を問うのではなく、ジェンダー（性自認）を任意の選択式にするなど、固定概念に縛られずユーザーのプライバシーと人権を尊重しようと努力しています。

小さなことですが、我々開発者が作るソフトウェアによって皆様の人権が尊重される社会を築くことができるので、性的マイノリティのみならず、Webアクセシビティを通してさまざまなユーザーもサービスを利用できるように作っていきたいと思います。

また、徹底的に国際化を開発に盛り込むことにより国籍を問わず日本に在住しながらも日本語が読めない方々が英語で情報にアクセスできるようにもしています。

プライド月間ですが、一開発者として多様な生き方があっていい社会にしたいと思います

したっけ！