Chromeが小さいJPEGを違って表示する理由
Original : Why tiny JPEGs look different in Chrome
Pourquoi c'est important
ブラウザ間のJPEGレンダリング差異がWebデザインに影響する可能性を示す。
Chromeは小さなサイズでJPEGを表示する際、DCT係数の一部のみを使用する最適化を行っており、これがFirefoxとの見た目の差異を生み出していることが判明した。
Chromeは、JPEGを小さなサイズで描画する際に特有の最適化を適用している。通常、JPEGの描画は完全に展開した後にスケールダウンするが、例えば2000×2000のJPEGを20×20で表示する場合、フルサイズの展開では約12MBのメモリを消費するのに対し、最終的な画像はわずか1.2KB程度で済む。
JPEG圧縮では、画像を8×8ブロックに分割し、DCT（離散コサイン変換）を用いて周波数領域に変換する。このとき、低周波成分は全体的な色調を、高周波成分は細部のディテールを表す。画像を大幅に縮小すると、高周波情報の多くは失われるため、フルデコードは非効率となる。
Chromeはこの特性を利用し、1/8スケールで表示する際には8×8ブロック全体をデコードせず、低周波のDCT係数のみを使用することでメモリと処理を節約する。この最適化がFirefoxとの描画差異を生む原因であり、SVG形式に切り替えることでこの問題を回避できる。