Photoshop×FirefoxでのPNGの変色を回避

この記事は約2分で読めます。

Photoshop Elementsで作ったPNG画像がFirefoxでも変色しないようにする方法
イメージ

こんにちは、さち です。

先日、Photoshop Elements で画像を作成していました。
完成してPNGで保存してサーバにアップロードしFirefoxで表示を確認してみると
どうも白色の発色がおかしい…。

カラーピッカーで色を拾ってみると
「R250 G255 B255 (#faffff)」となっており微妙に赤味が弱くなってしまっています。

今回は、この問題の解決方法を紹介していきたいと思います。

スポンサーリンク

保存方法で色が変わる

テスト  テスト
上の2つの画像の背景の白色は
IE などのブラウザでは全く同じ色で変色はないと思いますが
Firefox では左側の画像(保存→PNG)は変色してしまっていると思います。
(変色した状態をキャプチャしたものがトップにある画像)

Photoshop Elements には
「ファイル」メニューに「保存」と「Web用に保存」という2種類の保存方法があり
このどちらを使うかによって Firefox での発色が変わってきます。

原因はICCプロファイル?

この問題は「ICCプロファイル」によって起こっている気がします。

「保存→PNG」と「保存→PNG-24」では
ICCプロファイルの扱い方に違いがあるようで
これが原因で保存方法によって発色に違いが出るようです。

「カラープロファイルって何?」という方はこちらの記事を見てみて下さい。

白をちゃんとした白で発色させるには

比較
前述の項を読んできた方はすでにお気づきだと思いますが
白色をちゃんと白色として発色させるためには
画像をPNGとして保存する際に「Web用に保存」を選択します。

通常のPNGでの保存は「PNG-24」がそれに当たるので
これを選択して保存しましょう。
操作画面

「保存」から保存する際にも
「ICCプロファイル」という項目があるにはあるのですが
「PNG」を選択するとなぜかグレーアウトしてしまい設定できなくなってしまいます。

2種類の保存方法で画像の色が変化してしまうというのは
ちょっとややこしいですね…。

コメント

タイトルとURLをコピーしました