ChromeがJPEGを小さく表示する理由
原題: Why tiny JPEGs look different in Chrome
なぜ重要か
ブラウザ間のレンダリング差異の技術的根拠が明らかになり、Web開発者が画像表示の最適化や互換性対応を検討する際の重要な知見となる。
Webエンジニアのブログ記事によると、ChromeはJPEGを小さなサイズで表示する際に、画像を完全展開せず、DCT係数の低周波成分のみを利用する最適化を行っている。この仕組みにより、FirefoxとChromeで同じ画像が異なって見える現象が発生する。記事は2026年8月3日に公開された。
エンジニアのGuillaume Técherは、同僚のPCで表示されたロゴが自分のPCと見た目が異なることに気づいたことをきっかけに、ChromeのJPEGレンダリング動作を調査した。問題の画像は15pxで表示されており、Firefoxでは細く正確に見えたが、Chromeでは同じ画像が若干太く見えた。SVGに差し替えることで問題は解決したが、根本的な原因に興味を持ち調査を続けた。
通常、JPEGを小さなサイズで表示する場合、画像を一度すべてメモリ上に展開してからリサイズする方法が一般的だ。しかし2000×2000ピクセルのJPEGを20×20ピクセルで表示する場合、完全展開すると約12MBのメモリを消費するのに対し、最終的な出力はわずか約1.2KBに過ぎない。大部分の情報は縮小の過程で失われる。
JPEGは圧縮時に画像を8×8ピクセルのブロックに分割し、それぞれをDCT（離散コサイン変換）によって周波数領域に変換する。各ブロックは低周波から高周波まで様々な成分（基底関数）の係数として表現される。
画像を1/8スケールに縮小する場合、8×8ブロックが最終的に1ピクセルに対応する。縮小された画像では高周波の細部情報はほぼ失われるため、低周波の情報だけで十分な再現が可能となる。ChromeはこのDCT係数の低周波成分のみを選択的にデコードすることで、完全展開を省略し、処理効率を高めるという最適化を実装している。この最適化は処理速度やメモリ消費を削減する一方で、FirefoxなどほかのブラウザとJPEGの見た目が微妙に異なる結果をもたらすことがある。