Chrome for Developersのブログで、9月16日にベータ版となったChrome 155の変更点がまとめられました。CSSの新しい指定やJavaScriptのモジュール読み込みの改善など項目は多いのですが、画像を扱う制作者として目が留まったのは、JPEG XL(image/jxl)の画像を読み込んで表示する機能がBlink(Chromeの描画エンジン)に加わったことです。

JPEG XLは国際規格ISO/IEC 18181として標準化された画像形式です。紹介記事によると、読み込みの途中から段階的に絵を見せられるプログレッシブ表示に対応しており、体感の表示速度を上げやすいとされています。加えて、広い色域やHDR、高いビット深度、アニメーションも扱えます。写真を多く載せるサイトや、色の再現にこだわる商品写真などとは相性のよい特徴がそろっています。回線の細い環境で大きな写真を見せるとき、最後まで読み込まれるまで空白が続くのか、粗い絵が先に出て徐々に鮮明になるのかでは、見ている人の印象がかなり違います。

中身の実装にも注目したい

今回の対応では、デコード(画像データを表示できる形に戻す処理)に、Rustで書かれたjxl-rsというデコーダーが使われています。記事ではこれを「メモリ安全な純Rust製のデコーダー」と説明しています。画像の読み込み処理は外から届いたデータをそのまま解析する部分なので、昔から脆弱性の温床になりやすい場所でした。新しい形式を受け入れるにあたって、安全性を意識した実装を選んだという点は、ブラウザ側の姿勢として心強く感じます。

とはいえ、今の段階はあくまでベータ版での対応です。正式版にいつ届くか、ほかのブラウザでどこまで使えるかは、それぞれの状況を確かめる必要があります。すぐにサイトの画像をJPEG XLへ置き換えるというより、<picture>要素で対応ブラウザにだけJPEG XLを渡し、それ以外にはWebPやJPEGを返す、という段階的な使い方が現実的でしょう。この書き方なら、対応していないブラウザで画像が欠けることもありません。

ちなみに同じベータ版には、ほかにも制作者に関係する変更が並んでいます。コンテナの先頭や末尾の子要素の余白を切り落とせるCSSのmargin-trimや、読み込みに失敗したJavaScriptのモジュールをあらためて読み込み直せるようにする変更などです。画像の話と合わせて、不安定な回線でも崩れにくいページを作るための部品が少しずつそろってきている印象です。

中小企業のサイトでは、画像の書き出し形式を一度決めたら何年も見直さないことが珍しくありません。WordPressのメディアライブラリや画像最適化プラグインがこの形式をどう扱うかも、今後の動きを見ていきたいところです。私たちも、写真の多い案件から少しずつ試しながら、表示の速さと画質のバランスを確かめていくつもりです。