Web用画像のカラープロファイルの埋め込みについて

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
ogp

みなさんはWeb用に画像を書き出す際、カラープロファイルってどうしていますか?

カラープロファイルとはざっくりいうとWebサイトを見る人の環境による画像の色の違いを極力なくして同じ色で表示させるためのデータです。

私の場合は基本カラープロファイルは埋め込まないのですが色が重要な写真にはsRGBのカラープロファイルを埋め込むようにしています。その理由は以下の通りです。

まずはこちらのページをご覧ください→カラープロファイルテストページ

大抵の方の場合は下記画像のようにカラープロファイルが埋め込まれている画像も埋め込まれていない画像も同じように表示されているかと思います。

chrome

しかし一部の方の環境によってはデザイナーが意図していない状態で表示されているかもしれません。

safari(Version6〜)やChrome(Version61〜)ではカラープロファイルが埋め込まれていない画像はsRGBとみなして表示するので問題ないのですがFirefox(Version58現在)が曲者です。広色域ディスプレイ+Firefoxの組み合わせで見ると下記のような感じで表示されます。(こちらの画像はイメージです。sRGB画像で擬似的に表現するために加工しています)

firefox

彩度が高く(設定による)、人物の場合は大抵赤ら顔になってしまいます。ごく少数のユーザーとはいえ化粧品の宣伝用画像だったりしたら致命的ですよね。某有名化粧品メーカーの画像もカラープロファイルが埋め込まれていないので広色域ディスプレイお持ちの方はサイトをFirefoxとsafariで比較するとよくわかると思います。

書き出し画像にカラープロファイルを埋め込む事でこの大きな差異を防ぐことが出来ます。

写真以外にカラープロファイルを埋め込む場合は注意が必要です。カラープロファイルテストページの左側の青の部分ですが背景をCSSで青(#218dd9)にしてそのなかに同じ青(#218dd9)で色付けしたロゴ画像を配置しています。

上の画像のように広色域ディスプレイ+Firefoxのような組み合わせの場合、画像部分にカラープロファイルを入れるとCSS部分は彩度高めで表示されて画像部分はsRGBで表示されるので差異が生じてしまいます。最初に「基本カラープロファイルは埋め込まない」と書きましたがこのような理由から写真以外はプロファイルを埋め込まないようにしています。

img

写真にカラープロファイルを埋め込むには 「書き出し形式」や「Web用に保存(従来)」を使って書き出します。保存ダイアログで「sRGBに変換」と「カラープロファイルの埋め込み」にチェックを入れて保存します。

cap

ちなみに「画像アセット」で書き出された画像はカラープロファイルが埋め込まれません。

01

自分はWeb用画像を書き出す場合ほぼ画像アセットで書き出しているので不便でどうにかできないかということで書き出された複数の画像に対して簡単にsRGBのカラープロファイルを埋め込む事が出来るTipsを開発しました。

複数の画像に対してあっという間にカラープロファイルを埋め込む方法について

カラープロファイル(sRGB)埋め込み用データ一式をダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「スクリプトフォルダ」内の「Dearps_sRGB_jpg.jsx」と「Dearps_sRGB_png.jsx」をPhotoshopのスクリプトフォルダに移動します。
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動します。

(3)カラープロファイルを埋め込みたい画像ファイル(フォルダでもOK)を選択して「ドロップレット」フォルダの中の「sRGB_jpg.app」もしくは「sRGB_png.app」にドラック&ドロップします。
(jpgの場合→「sRGB_jpg.app」、pngの場合→「sRGB_png.app」)

03

すると元データにカラープロファイル「sRGB IEC61966-2.1」が埋め込まれた状態で上書き保存されます。(上書き保存なので必要に応じて要バックアップ)

ちなみにドロップレットはどこに保存しておいてもOKです。

是非お試しください。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*