きゃらりこ日誌

つい最近リリースされた、Chrome 155やMicrosoft Edge 155、Firefox 158にて、相次いで新しい画像形式JPEG XLに正式対応したそうです。
最近は、新しい画像形式がいろいろと出てきていますね。
うちのサイトも、旧来のJPEG、PNG、GIFだけでなく、新しい画像形式であるWebP、AVIF、JPEG XLなども取り入れていかないといけないのかなぁ、なんて思ったりしています。
試しにトップページの大きな画像をAVIFにしてみる実験を行っていますが、私の環境では特に問題ない感じですね。

各形式の簡単な紹介

WebP

WebPは、透過やアニメーションにも対応している規格です。
動画用コーデック VP8の技術をベースにしている関係上、ベクター系の画像の線のエッジ部分を拡大してみると、もやが出がちです。
しかし、3つの中では一番古いこともあり、普及率が最も高いです。
画像中心で転送量が多いサイトだと、WebPを使っていることが多い印象です。
エンコーダーも普及しているので、この形式の画像を作りやすいというメリットもあります。

AVIF

AVIFは、次世代の高圧縮画像フォーマットとして注目されている規格です。
動画用コーデック AV1をベースにしている関係上、こちらもベクター系の画像の線のエッジ部分を拡大してみると、もやが出がちな印象があります。
また、デコードがやや遅れがちという欠点もあります。
ただ、これは昔のJPEGでもよくあったことなので、時間の経過と技術の進歩が解決してくれるでしょう。
エンコーダーは、あまり普及していない印象です。

JPEG XL

JPEG XLは、JPEGの後継を目指して開発された規格です。
動画コーデックをベースにしていないためか、ベクター系の画像の線のエッジ部分を拡大してみると、上記2つよりはもやがあまり出ていません。
JPEG特有のボケやモスキートノイズが、かなり軽減されているように感じます。
また、可逆圧縮にも対応しており、既存のJPEG画像を画質を損なわずにJPEG XL画像に変換できるのも強みです。
JPEGの後継とされていることもあってか、対応するアプリはWebPほどではありませんが、AVIFよりは多いようです。

使い分けが難しい

このように、いろいろと特徴があるのですが、実際は使い分けが難しいのですよね。
試しにWikimedia Commonsからダウンロードしてきたスズメの画像を、Googleが運営するSquooshに読み込ませ、デフォルト設定で各種画像形式に変換してみました。
目で見て比較してみたのですが、どの画像形式も画質に遜色ないんですよね。
違いは重箱の隅をつつくようなところだけで、画像を拡大してみないとまったくわかりません。
ただ、ファイルサイズでいえば「AVIF ＜ WebP ＜ JPEG XL」の順で、AVIFが最も小さかったです。

私のサイトには、ガラケーサイトと兼用していた時代に立てた「ウェブサイトの転送量を無駄に増やさない」という方針があります。
時代とともにその基準は緩めてきてはいますが、その方針は今でも変わっていません。
今となっては、ページによっては自サイトの1ページあたりの転送量よりも、ページに表示されている広告のGoogle AdSenseの転送量の方が多いんじゃないかと思う始末です。
それでも、少しでも転送量を減らしたい。
そんなこともあって、今回の実験ではファイルサイズが一番小さく抑えられるAVIFを導入しています。

とはいえ、すべての画像ファイルを新しい画像形式に置き換えるかというと、そうはいきません。
たとえば、SNSでシェアされた際に表示されるOGP画像は、WebPやAVIF、JPEG XLにはまだ未対応のプラットフォームが多いのが現状です。
また、RSSフィードに含める画像についても、規格が古いこともあり、古い端末やリーダーでの互換性を考えると、WebPやAVIF、JPEG XLの使用は避けた方がいいでしょう。

まとめ

あえて新しい画像形式に追従せず、旧来の画像ファイルのままでいくという考え方もあります。
ただ、標準化された新しい技術に乗らないのは、損というものです。
結局のところ、適材適所で使い分けるのがベストということになりそうです。
大きい画像やアクセス数が多いページの画像は、圧倒的な軽さを誇るAVIFや、普及率で考えるならWebPに移行して転送量を削減する。
その一方で、外部サービスとの連携が重要なOGPやRSS、古いブラウザへの対応が求められる場合は、旧来のJPEGやPNGを使う。
そんなハイブリッドな運用が必要なのかもしれません。
これらの新しい画像形式が普及するまでは、頭を悩ませながらの運営が続きそうです。