Chromiumベースで再構築された新しいMicrosoft Edgeが主流となり、2023年2月にはInternet Explorer 11の完全無効化が実施されたことにより、オールドブラウザーへの対応について変革期を迎えており、画像フォーマットやCSSの記述などの「べき論」についても、知識のリプレースを求められている。
ここでは、WebP、avifなどの画像フォーマットについて、私見を述べたい。
2023年3月20日現在、ブラウザー対応状況が確認できるCan I useによると、WebP image formatの対応状況は日本で96.17% グローバルで96.76%、AVIF（AV1 video format）の対応状況は日本で76.75% グローバルで83.16%となっている。
ちなみに、今では誰も使用前に対応状況を確認することはなさそうなPNG alpha transparencyの対応状況は日本で98.54%、グローバルで99.16%、PNG faviconsの対応状況は日本で97.51% グローバルで97.8%である。
数値だけで考えると、WebPは「まだ早いのでは？」という印象も残るが、ブラウザーごとの対応状況まで含めて確認すると、IE11の完全無効化が実施された現在、実質的にはWebPについては利用して問題ないフォーマットになったと考えられる。
WebPとするメリットは、「画質を保ったままの画像サイズ軽量化」と「非可逆圧縮なのに背景透過やアニメーションに対応」できることである。
JPG・PNGでなければならない理由がある場合を除き、WebPにするのが良いと言える。
WebPは、JPGと同様に、ブロック状、ぼやけなど、見映えの悪い副作用が発生する場合があるが、AVIFにすると、同じファイルサイズでさらに滑らかでシャープな画像を提供することができ、JPGやWebPで確認されるような副作用の発生がより少なくなる。しかし、AVIFのブラウザー対応状況はまだまだ厳しいと言える。
AVIFとWebPの出し分けについては、HTMLやjsでは<picture>要素を使用し
<picture>
<source srcset="noir.avif" type="image/avif">
<source srcset="noir.webp" type="image/webp">
</picture>ブラウザーで自動的に選択させると良い。
CSSでは現状<picture>に相当する自動選択がないため、JavaScriptと組み合わせる必要がある。Modernizrを利用し、cssセレクターを出し分けるのが簡単である。
ところで、2023年3月20現在、AVIFファイルの準備には手間がかかり、上記のように背景画像としてAVIFを使用するためには制約もある。
作業コストや保守運用コストを考えた場合、AVIFの使用はまだまだ限定的にするべきであり、当面はWebPをメインとし、必要に応じてAVIFやその他のファイル形式を採用するのが良いと考える。
コメントを残す