retireSakiの日記

たぶん引退した?ソフトウエアエンジニアのブログ

Firefox と Google Chrome、 Chromium の透過PNG画像の描画を比べると、Google Chrome だけが!!

 ホームページやブログなどで、画像周辺の背景色とページ背景色とを同一にしたい場合、透過PNGを使って背景色を透明にします。
私も利用していて毎回気になっていたのですが、Google Chrome は透過PNG画像処理が速度優先するあまり甘いです。
直近の投稿記事を使って、FirefoxGoogle ChromeChromium のそれぞれの表示状態を確認します。

確認環境は
・OS は Ubuntu 18.04 LTS (64ビット) Desktop
FireFox のバージョンは 64.0
Goggle Chrome のバージョンは 70.0.3538.77Official Build)64 ビット)
Chromium のバージョンは 71.0.3578.80Official Build)Built on Ubuntu (64 ビット)
ブラウザーは現時点で、Ubuntu 18.04 LTS での最新リリースバージョンです。

 では、各ブラウザーでの画像の顆粒周辺の色を見てください。

Firefox の表示

Firefox の表示

Goggle Chrome の表示

Goggle Chrome の表示

Chromium の表示

Chromium の表示

 Goggle Chrome だけが顆粒の周辺色が緑色になっています。
緑色になっている部分は半透過の部分です。

 ブラウザー側が透過PNG画像を描画する際、さまざまな計算式を使っています。
計算式を書くと長くなるので省略しますが、半透明の計算する際の描画ロジックのネスト処理が甘かったりや周辺ビット定数などが合っていない場合、色が偏る性質があります。
特に描画速度を優先すると、割と起こりやすい現象です。
逆に言えば Google Chrome の透過PNG画像描画に関して、色の忠実な再現性に疑問が湧いてきます。

 確かに Google Chrome は Chronime をベースに様々な部分を工夫し、高速化を実現していますが、
『こんな単純な部分で!?テストしてないのでは?』
と思ってしまいます。
 

注目記事

「Amazon.co.jpアソシエイト」または「[乙の名称を挿入]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。