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形式に切り替えることで問題は解消する。

Sumber

guillaumetech.github.io — Baca artikel asli →