読者です 読者をやめる 読者になる 読者になる

Photoshopの「画像アセット」とFirefoxの微妙な関係(多分違う)

仕事

1ヶ月ほど前に、デザイン案制作に使用するソフトウェアを10年近く使用し、相棒と呼べる程の関係だったFireworksから、Photoshop乗り換えました。「俺にはFireworksが最高なんだよ!」と思っていたものの、1ヶ月が経過した今、Fireworksで作業中に、Photoshopでのショートカットキーを連打し「あれ?なんで機能しないんだよ…Fireworks…使えねぇなぁ」と言う日々を過ごしています。


今日、HTMLコーディング作業中に、「ある問題」にふと気が付き、作業そっちのけで調査を行ったものの、自分の知識だけではどうしようもなくなったため、今後の対応策の検討を含め、ブログとして残します。


「ある問題」ですが、Photoshopの「画像アセット」で書き出した画像ファイルでPNGファイルのみが、Firefoxで表示した場合、デザイン案上の色味と、画像ファイルの色味が微妙に異なることに気が付きました。


例えば、デザインデータ上で「#FF0000」を指定している場合、Photoshopの「画像アセット」で書き出した、PNGファイルを、Photoshopで開いて確認しても「#FF0000」となっているのに、Firefoxで表示すると本来は「#FF0000」となる場所が「#DA0000」として表示されます。


また、僕が遭遇した状況では、「Web用に保存」で画像ファイルを書き出した、PNGファイルをFirefoxで表示しても色味が変わることはなく、あくまでも、Photoshopの「画像アセット」で書き出した、PNGファイルをFirefoxで表示した場合にのみ発生している用に感じられます。


僕の制作環境は以下の通りです。

OS Microsoft Windows 8.1
PSDファイルのカラープロファイル sRGB
ソフトウェア Adobe Photoshop CC 2015.1


まずは、ブラウザの問題を疑い、Firefox(43.0.1)、Google Chrome(47.0.2526.106 m)、Internet Explorer 11での表示の確認を行い、Internet Explorer 11のカラーマネージメント機能はあれということを考慮しつつも、Firefox以外では、色味のズレが起きていないことを確認しました。


そこで、Firefoxのアドレスバーに「about:config」と入力し、試しに「gfx.color_management.enabledv4」を「true」、「gfx.color_management.mode」を「1」に変換しました。


「gfx.color_management.mode」が「0」の場合は、カラーマネージメントは行わない、「1」の場合は、カラープロファイルが設定されている画像はカラーマネージメントを行い、カラープロファイルが設定されている画像は「sRGB」として表示、「2」の場合は、カラープロファイルが設定されている画像はカラーマネージメントを行い、カラープロファイルが設定されている画像はカラーマネージメントを行わないことを意味します。


しかしながら、「gfx.color_management.mode」を「1」の場合、CSSで設定した色も全て「sRGB」として表示され、全体的にくすんだような表現にり、また、「gfx.color_management.mode」を「0」にすることで、Firefoxでも、意図した色味で表示されることを確認したものの、カラーマネージメントをさせないのもいかがなものかと判断し、ブラウザの設定以外で模索することにしました。


次に「画像アセットで書き出された画像ファイルにはカラープロファイルが含まれるのでは?」と考え、調べたものの、AdobeのWEBサイトには

注意:カラープロファイルとメタデータは、書き出される画像にまだ埋め込まれていません。この機能は、今後のリリースで使用可能になる可能性があります。


と書かれており、カラープロファイルが含まれている気配はなく、また、画像ファイル内のメタデータが悪さをしているのかと考え、「JPEG & PNG Stripper」を使用し、削除を行ってみたものの、メタデータは全く踏まれておらず1バイトも軽くならず…


僕の知識ではここでお手上げです。


一応の解決策として、Photoshopの「画像アセット」で書き出したPNGファイルを、再度、Photoshopで上書き保存すると、Firefoxで表示しても色味が変化することはなくなるものの、ファイルの容量も大幅に増え、また精神衛生上はあまりよくないため、妥協案としても決断できず…


そこで、 カラー設定の「RGB」を「RGB モニター」に変更、デザインデータのカラープロファイルを「このドキュメントのカラーマネジメントを行わない」に変更しました。


そして、PNGファイルの書き出しのみ、「画像アセット」を使わずに、該当のレイヤーを右クリックし、「○○○としてクイック書き出し」「書き出し形式」によっての書き出しの場合は、Firefoxでも色味に差異が出ないことが確認できたため、PC、PhotoshopFirefoxの設定を含め、原因がはっきりするまでは、この方法でやって行こうと思います。


基本的に自分のカラーマネージメントに対しての知識不足感が否めないし…
何が正しくて…何が正しくないのか…もう分からないよ…