【ITニュース解説】Where did the 254s go? A heatmap of non-255 pixels in a white JPEG

画像は、ウェブサイトやアプリケーションにおいて情報を伝える重要な手段であり、その品質はユーザー体験に大きく影響する。特に、オンラインストアの商品画像などでは、背景を特定の基準に合わせるよう求められることが多い。例えば、「背景色は純粋な白（RGB値で255,255,255）であること」といった要件がその一つである。しかし、この「純粋な白」という非常に厳密な条件が、画像を保存する際のファイル形式によって維持されにくいという現象が報告されている。

この現象を詳しく調べるため、ある実験が行われた。まず、白いスニーカーの画像を準備し、その背景を完全に純粋な白（RGB値255,255,255）にしたPNG形式の画像を作成した。PNGは「可逆圧縮」という方式で画像を保存するため、元のピクセル情報は一切失われず、色も忠実に保たれる。したがって、このPNG画像の背景は、まさに完璧な白であった。

次に、この完璧な白背景のPNG画像を、ウェブ上で広く利用されているJPEG形式に変換した。JPEGは「非可逆圧縮」という方式を用いる。これは、ファイルサイズを小さくするために、人間が視覚的に気づきにくい情報を間引いてデータを削減する仕組みである。その結果、元の情報がわずかに失われ、画質が劣化する可能性がある。今回の実験では、JPEG変換時の画質設定を一般的に使われる「品質85」に設定した。

変換後、新しくできたJPEG画像を開き直し、元のPNG画像と比較して、どのピクセルが純粋な白（255,255,255）からずれてしまったのかを詳細に分析した。具体的には、PNG画像では純粋な白であったにもかかわらず、JPEG変換後にRGB値のいずれかが255未満になったピクセルを「ずれたピクセル」として特定した。この調査方法は、特定の背景領域を事前に指定するのではなく、画像全体の純粋な白ピクセルを追跡するため、より汎用的な検証方法となっている。

この分析の結果、驚くべき事実が明らかになった。元のPNG画像で完全に白だったピクセルの中から、実に10,403個ものピクセルが、JPEG変換後には純粋な白ではなくなっていたのである。さらに、これらの「ずれた」ピクセルが画像上のどこに位置しているかを視覚的に分かりやすくするために「ヒートマップ」という形で可視化したところ、そのほとんどが白いスニーカーの「輪郭部分」に集中していることが判明した。

なぜこのような現象が起きるのだろうか。JPEG圧縮は、画像を小さなブロックに分割し、それぞれのブロック内で色の情報を効率的に表現しようとする。この過程で、色の変化が少ない領域（例えば、均一な白背景）ではデータを大きく削減できる。しかし、スニーカーの輪郭のような、色の変化が大きく、隣接するピクセル間で明暗や色合いの差がはっきりしている領域では、その変化を再現しようとすることで、微妙な色の調整が行われる。この調整の結果、隣接ピクセルとの兼ね合いにより、元々は純粋な白であったピクセルが、ごくわずかに白以外の色（例えば、RGB値が254,254,254や253,253,253など）に変化してしまうことがあるのだ。

ずれたピクセルの度合いについても詳しく調べられた。ほとんどのピクセルは、純粋な白（255）からわずか1〜2レベル低い値（例えば254や252）に変化していることが分かった。具体的には、ずれた10,403ピクセルのうち、半分以上にあたる5,129ピクセルが、いずれかのRGB値が254未満になっていた。しかし、さらに閾値を厳しくして、250未満になったピクセルを数えると、その数はわずか293ピクセルにまで減少した。この結果は、JPEG圧縮による色のずれが、ほとんどの場合ごくわずかな範囲で発生していることを明確に示している。

システムエンジニアとしてこのような現象に直面した場合、ウェブサイトの要件である「純粋な白背景」をどのように解釈し、どのように実装するかが課題となる。今回の実験結果は、たとえわずかなずれであっても、完全に255,255,255の白を維持することはJPEG圧縮の特性上、非常に難しいという現実を示している。そのため、実用的な観点からは、「完全に255,255,255であること」という厳密な要件ではなく、「例えば、RGB値のいずれかが250を下回らないこと」といった、ある程度の許容範囲を設けることが現実的な解決策となる可能性がある。これは、「ほぼ白」という概念を導入し、技術的な制約とビジネス要件とのバランスを取ることに他ならない。

さらに、色の情報を圧縮する際に用いられる「クロマサブサンプリング」という技術も、この現象に影響を与えている可能性が指摘されている。これは、人間の目が明るさの変化には敏感だが、色合いの変化には比較的鈍感であるという特性を利用し、色情報を間引いてデータ量を削減する手法である。この色情報の削減が、輪郭部分の微妙な色のずれを引き起こす一因となっているのかもしれない。

この実験は、画像処理やファイル形式が持つ奥深さを示している。単に画像を保存するという単純な操作の裏側にも、複雑な圧縮アルゴリズムが存在し、それが最終的な画質や色に影響を与えることを理解することは、システムエンジニアとして非常に重要である。特に、ウェブアプリケーション開発やデータ処理においては、このような技術的詳細が予期せぬ問題を引き起こす可能性があるため、基礎的な知識を持つことが求められる。今後、輪郭部分以外の「孤立したずれ」の原因や、クロマサブサンプリングの具体的な影響について、さらなる調査が進められることが期待される。