Chrome、JPEGを小サイズ表示時に最適化処理
Judul asli: Why tiny JPEGs look different in Chrome
Mengapa Ini Penting
ブラウザ間のJPEG描画差異の原因解明は、Web最適化と相互運用性の理解に重要。
ChromeはJPEGを1/8以下に縮小表示する際、DCT係数のDC成分のみを使う最適化を行い、Firefoxなど他ブラウザと異なる見た目になる場合がある。
エンジニアのGuillaume Técher氏が、同僚のPCで15pxサイズのロゴがChrome上で自分の環境(Firefox)と異なって見えた理由を調査した。ChromeはJPEGを小さなサイズで表示する際、独自の最適化を行っていることが判明した。
JPEG圧縮では画像を8×8ピクセルのブロックに分割し、DCT(離散コサイン変換)で周波数領域に変換する。各ブロックの「DC成分」(平均色)と高周波成分(細部の模様)がそれぞれ係数として保存される。
画像を1/8に縮小する場合、8×8ブロック全体が最終的に1ピクセルに対応する。このとき、高周波の細部情報はほぼ失われるため、ChromeはDCT係数のうちDC成分(直流成分)だけを使って復号する最適化を実施する。これにより、フル解凍してから縮小する通常手順と比べ、メモリと処理を大幅に節約できる。
例として2000×2000のJPEGをフル展開すると約12MBのビットマップが必要だが、20×20の最終出力は約1.2KBに過ぎない。Chromeのこの手法は不要な処理を削減する一方、他ブラウザとわずかな描画差異を生む場合がある。SVG形式に切り替えることで問題は解消する。