【ハマった】 ImageMagick で作成した画像の色表示がブラウザによって異なる。
ImageMagick とは
画像変換に使う十徳ナイフ的な CLi です。
今回の問題
Chrome と Safari とで、 変換した PNG 画像の色合いが違った。 それどころか、置換したはずの色とも違う色が表示されていた。
原因
画像のカラープロファイルがない場合、ブラウザごとに処理が違う。 Safari: スルーする Mobile Safari: 推測する Chrome: 独自の置換をする
( 要出典 )
対策
convert コマンドのオプションに
-set colorspace sRGB
を明示的に加えて、色空間を指定する。
例:
convert -set colorspace sRGB -fill '#FFCCFF' -opaque '#FFFFFF' before.png after.png # 指定色 #FFCCFF で選択色 #FFFFFF を塗りつぶす。
付記
さらに、モニターのドライバが足りていない場合も、 OS によって処理が異なるので注意。 2 重にめくらましがあると簡単には解決できなくなる。
