イラレ（Adobe Illustrator）で書き出すと、色があせる、くすむ時がある。SVGやJPGも

どーもD-MARKING わたなべです。

ご訪問ありがとうございます。

こちらの記事はWEBデザイナー向けの記事です。

イラレ（Adobe Illustrator）で書き出すと、いざホームページにして、ブラウザでみると、色があせる、くすむ時があります。

もちろんちゃんとRGBです。

Adobe Illustratorで書き出すとSVGがくすむ

この場合は、ドキュメントのプロファイルによるものです。

例えば、ADOBE STOCKの素材ファイルを利用して、コピーして、

新規ドキュメントで配置しデザインし、いざWEB用に書き出すと、

アップすると色が違う。。

これは、コピーする前に、素材のカラープロファイルを

作業用のプロファイルに変更することで、解決できました。

カメラマンからもらった高品質な写真が、WEB用にアップすると、色があせる。

こちらの場合、もらった画像にカラープロファイルの指定がしてある場合にそうなりました。

プロカメラマンの画像はADOBE RGB 1998 が指定してありました。
sRGB（普通のモニタ）より色の範囲が多いデザイナー向けのモニタで色が表示できるものです。
（iMACも、もちろんsRGBより広く表現できますし、私のサブモニタも、DCI-P3 95%という似たようなものを使っています。）

このプロファイルを外してしまうような圧縮をする場合、

画像がくすんでしまいます。

WEBは画像をなるべく軽くするのが一般的で、画像の大きさを必要なサイズまで小さくするのは当たり前ですが、

さらに、ロスレス圧縮を自分でするか、もしくは、wordpressにアップする際、プラグインなどで圧縮するのが今の流れです。

解決策としては、

1.ロスレス圧縮の際、プロファイルの指定を外さない 

2.カラープロファイルを外してsRGBに変換後、ロスレス圧縮を行う

ただし、ワードプレスのアップの際、サムネイル作成でカラープロファイルが保持されないので、

１の方法は使えないので、２の

フォトショップなどで、一度WEB用に保存して、カラープロファイルを外して保存しなければならない。

つまり、

ADOBE RGB 1998のカラープロファイルが指定してある画像を、wordpressにアップすると、色がくすんでしまう、ということです。

だから、撮影した画像をそのままアップして使おうと思っている場合は、カメラマンに納品形態はsRGB でプロファイルは埋め込みなし、と指定しなければ手間が増えるということでした。

以上
わたなべでした。

2024.10.18追記　またカメラマンからもらったデータをdsRGBにしてと言い忘れていて、自分で変更した。

200枚以上ある写真なんでバッチ処理すればいいか、と思ったけど、なんと、すでにそういうバッチみたいな機能がphotoshopに備わっていた。

https://helpx.adobe.com/jp/photoshop/using/processing-batch-files.html

イメージプロセッサーでのファイルの変換

実際やってみたが、バッチのように、毎回ファイルが開いて、変換して保存する作業を自動で行ってくれた。

やりかた

（Photoshop）ファイル／スクリプト／イメージプロセッサーを選択します。

こんなかんじ！

それでは！