【ITニュース解説】JPEG quality 75 at 4:4:4 beat 0.99 at 4:2:0 on red text

私たちは日々、ウェブサイトやアプリケーションでさまざまな画像を目にする。画像の品質を保ちつつファイルサイズを小さくすることは、ウェブページの表示速度を速め、ユーザー体験を向上させる上で非常に重要だ。しかし、JPEGという広く使われている画像形式には、特に文字を含む画像を扱う際に、見落とされがちな落とし穴があることが明らかになった。単に画質設定を上げても、ファイルサイズが肥大するだけで、肝心な部分の画質は思ったほど改善しないケースがあるのだ。

まず、JPEGがどのように色を表現しているかを知る必要がある。JPEGは、私たちが普段目にするRGB（赤、緑、青）という色の情報を、少し異なる方法で保存している。具体的には、画像を「輝度（Luma）」と「色差（Chroma）」という2つの種類の情報に変換する。輝度は画像の明るさに関する情報であり、色合いや鮮やかさとは区別される。一方、色差は色の鮮やかさや種類を示す情報だ。人間の目は明るさの変化には敏感だが、色の細かな変化には比較的鈍感だと言われている。 この特性を利用して、JPEGは「クロマサブサンプリング」という技術を使う。これは、色差情報を間引くことで、ファイルサイズを大幅に削減する圧縮方法だ。例えば、「4:2:0」というサブサンプリング方式は、輝度情報はそのまま保持する一方で、色差情報を水平方向、垂直方向ともに半分に間引く。つまり、4つの輝度ピクセルに対して、1つの色差情報しか持たないことになる。これによりファイルサイズは小さくなるが、色情報の一部が失われるため、場合によっては画質に影響が出ることがある。

今回焦点を当てているのは、特に「彩度の高い、はっきりとした赤い文字」のような画像だ。このような画像の場合、文字とその背景の境界線（エッジ）の鮮明さは、明るさ（輝度）だけでなく、色の違い（色差）によっても大きく決まる。赤い文字のように、明るさ（輝度）がそれほど高くない色と白などの明るい背景との境目では、色差の情報がエッジを際立たせる上で非常に重要な役割を果たすのだ。 ここでクロマサブサンプリング、特に4:2:0方式を使うと問題が生じる。色差情報が間引かれることで、文字のエッジ部分の色が正確に表現されなくなり、結果として文字がぼやけたり、色が不正確になったり、場合によってはわずかに茶色がかったりすることがある。これは、画像全体では目立たなくても、文字のような細部にとっては大きな問題となる。

ニュース記事では、この問題を検証するためにいくつかの実験が行われている。プログラムで作成したポスター画像や、ウェブ上のテンプレート画像を用いて、さまざまなJPEGエンコード設定での画質とファイルサイズが比較された。画質の評価には、「ΔE（デルタE）」という指標が用いられている。ΔEは、元の色と圧縮後の色の違いを数値で示すもので、数値が小さいほど元の色に近い、つまり画質が良いことを意味する。 一般的な認識では、JPEGの画質設定（quality）を上げれば上げるほど画質は良くなると考えられがちだ。しかし、実験では、品質設定を0.80から0.99に上げた場合、ファイルサイズは2倍以上に膨れ上がるにもかかわらず、文字のエッジ部分のΔE値は8.11から6.35と、改善はするものの劇的ではないことが示された。 驚くべきことに、品質設定を0.99から1.00に上げた途端、ファイルサイズはさらに急増し、ΔE値は0.19へと大幅に改善した。この急激な変化は、品質設定の数値だけではなく、裏側で動作しているクロマサブサンプリング方式が4:2:0から「4:4:4」へと切り替わったためであることが判明した。4:4:4サブサンプリングは、色差情報を間引かない方式で、これにより文字のエッジ情報が正確に保持される。

さらに、画像処理ライブラリ「Pillow」を使って、品質設定を固定し、サブサンプリング方式だけを変えて比較する実験も行われた。例えば、品質設定を75とした場合、4:2:0でのΔEが8.64、ファイルサイズが120,513バイトだったのに対し、4:4:4ではΔEが4.47、ファイルサイズが169,640バイトだった。これは、ファイルサイズは少し大きくなるものの、ΔEが大幅に改善し、画質が明らかに向上したことを意味する。 特筆すべきは、Pillowでquality=75、subsampling=4:4:4でエンコードしたファイル（169,640バイト、ΔE 4.47）が、ブラウザでquality=0.99、subsampling=4:2:0でエンコードしたファイル（270,978バイト、ΔE 6.35）よりも、ファイルサイズが37%も小さく、かつ画質も優れていたという事実だ。この結果は、単に高い品質設定を選ぶだけでは非効率であり、クロマサブサンプリングの選択が文字の画質にとって非常に重要であることを強く示唆している。

現在、ウェブブラウザでJavaScriptのcanvas.toBlob()のようなAPIを使ってJPEG画像をエンコードする場合、残念ながらクロマサブサンプリング方式を直接指定するオプションがない。多くのブラウザ（ChromiumやWebKitベース）は、品質設定が非常に高い（例えば0.995、つまり四捨五入で1.00）にならない限り、デフォルトで4:2:0を使用する傾向がある。一部のブラウザ（Firefox）は比較的低い品質設定で4:4:4に切り替わるが、これもブラウザの内部的なデフォルト設定に依存する。 この状況を踏まえ、ニュース記事では以下の対策を推奨している。

1. サーバーサイドでのエンコード: 彩度の高い文字が含まれるJPEG画像をウェブで配信する必要がある場合、ブラウザのエンコーダーに任せるのではなく、サーバー側で画像処理ライブラリ（Pillowなど）を使い、明示的にsubsampling=4:4:4を指定し、品質設定は中程度（例えば75から90程度）に設定してエンコードすることが望ましい。これにより、ファイルサイズを抑えつつ、文字の画質を大幅に改善できる。
2. 出力設定の確認: 実際にサーバーから配信されるJPEG画像のエンコード設定がどうなっているかを確認するため、画像ファイルのヘッダー情報（SOFバイト）を読み取ることが重要だ。これにより、意図した設定で出力されているかを検証できる。
3. 適切な画像形式の選択: 今回のポスター画像のように、少数の単色とテキストで構成されるような画像の場合、JPEGではなく「8-bit PNG」という形式が最適であることも示唆された。8-bit PNGは、ファイルサイズがJPEGよりも大幅に小さく、文字のエッジも完璧に保持できる。ただし、写真やグラデーション、イラストなど、色の数が非常に多い画像には適さないため、画像の特性に応じた適切な形式を選ぶ必要がある。

画像の最適化は、単にファイルサイズを小さくしたり、画質設定の数値を上げたりするだけでは不十分だ。JPEG画像においては、特に文字を含む場合に、その裏側で色情報がどのように処理されているか（クロマサブサンプリング方式）を理解することが極めて重要であることが、このニュース記事からわかる。システムエンジニアとしてウェブコンテンツやアプリケーションを開発する際には、画像の特性を見極め、適切なエンコード方式と品質設定を選択することで、ユーザーに最高の体験を提供できるよう努める必要がある。安易に「最高画質」を選ぶのではなく、画像の用途と内容に応じた「最適な画質」を見つけることが、効率的かつ高品質なウェブサイトやアプリケーションを実現するための鍵となるだろう。