WordPressにアップロードすると、写真がくすんで色あせて見えるため、何時間も編集に費やします。私たちは、自身のアイキャッチ画像でこの正確なフラストレーションを何度も経験しました。
この問題は通常、カラープロファイル間の単純な不一致が原因で発生します。幸い、アップロード前にファイルを変換することで、わずか数秒で修正できます。
このガイドでは、WordPressで画像の色の損失と彩度の低下を修正する方法を説明します。
この投稿で取り上げるトピックの簡単な概要を以下に示します。
WordPressで画像の色と彩度が失われるのはなぜですか？
画像の色と彩度の損失の主な理由の1つは、カラースペースです。
「カラースペース」とは、カメラや画面が表示できる特定の色域のことです。特定のクレヨン箱のようなものだと考えてください。箱によっては、より多くの色合いがあるものもあります。
インターネット上では、RGB（赤、緑、青）カラースペースのさまざまな形式が使用されています。最も一般的な2つの形式は、Adobe RGBとsRGBです。
多くのプロの写真家は、より多くの色を持ち、はるかに優れた結果を提供するAdobeのRGBカラー空間を使用して写真を撮影しています。
しかし、WordPressのようなほとんどのコンテンツ管理システム（CMS）は、sRGBカラースペースに依存しています。画像をアップロードすると、WordPressは画像を圧縮し、埋め込まれた「ICCプロファイル」メタデータ（画面にどの色を使用するかを指示するラベル）を削除することがよくあります。
このラベルがないと、ブラウザは画像をsRGBとして扱い、色が色あせて見えます。
Adobe RGB カラー空間でキャプチャされた画像は、より鮮やかで、ハイライトの色を正確に表示します。WordPress によって変換されると、それらの鮮やかな色は、わずかにくすんだ色調に置き換えられます。
例えば、ここでは異なる画質の画像の比較を示します。左側の画像はAdobe RGBカラースペースを使用して撮影されたものです。しかし、WordPressにアップロードすると、画像は鮮やかさを失い、くすんで見えます。
WordPressはリサイズされた画像も圧縮するため、わずかな品質低下の原因となる可能性があります。詳細については、WordPress JPEG画像圧縮の増減方法に関するガイドをお読みください。
これを踏まえて、WordPressで画像の色の損失と彩度の低下を簡単に防ぐ方法を見ていきましょう。
Photoshopを使用してWordPressで画像の色の損失と彩度の低下を修正する方法
この問題を解決する最も簡単な方法は、WordPressにアップロードする前に画像をsRGBカラースペースに変換することです。これは、Adobe Photoshopのような画像編集ツールを使用して簡単に行うことができます。
これは、WPBeginnerの私たち自身のデザインチームが使用している正確な方法です。これにより、チュートリアルで見られるすべてのスクリーンショットと機能グラフィックが、毎回鮮明で色精度が高くなります。
方法1：画像をsRGBに変換する
まず、Adobe Photoshopで画像を開く必要があります。
ここから、メニューの一番上にあるファイル » 書き出し » Web用に保存（旧バージョン）に移動します。
これで「Web用に保存」ダイアログボックスが表示されます。ここで、「sRGBに変換」というラベルの付いたボックスにチェックを入れることが重要です。
これにより、画像はPhotoshopで表示されるのと同じようにWordPressでも表示されるようになります。
方法2：Photoshopでカラー設定を編集する
一方、最初の方法の結果に満足できない場合は、この方法を使用できます。
Adobe Photoshopで、編集 » カラー設定に移動します。これにより、カラー設定ダイアログボックスが表示されます。
設定ドロップダウンメニューから「North America Web/Internet」を選択する必要があります。
次に、「カラーマネジメントポリシー」セクションで、RGB設定をワーキングRGBに変換に選択します。その後、「OK」ボタンをクリックして設定を保存します。
次に、アップロードした元の写真または画像を開く必要があります。
作業スペースプロファイルが一致しない場合、Photoshopは警告を表示し、どうするか尋ねてきます。
「作業スペースにドキュメントの色を変換」を選択し、「OK」をクリックしてください。写真の色プロファイルがより正確に変換されました。これで画像を保存して変更を保持できます。
アップロードしたいすべての画像に対してこのプロセスを繰り返します。これで、WordPressでの色や彩度の損失なしに、これらの変換された画像を安全にアップロードできます。
GIMPでWordPressの色の損失と彩度の損失を修正する方法
GIMPは、Adobe Photoshopの強力な無料代替ソフトです。これを使用して、WordPressへのアップロードのカラースペースを変換できます。
GIMPは基本的に、開こうとする各画像にカラープロファイルが埋め込まれているかどうかを検出します。画像がAdobe RGBカラースペースにある場合、GIMPは自動的に変換するためのダイアログボックスを表示します。
画像に埋め込まれたカラープロファイルがない場合や、GIMPが正しく読み取れない場合があります。その場合は、カラー空間をマニュアルで変更する必要があります。
まず、写真が使用している可能性のあるカラー空間を知る必要があります。通常はAdobe RGBですが、異なる場合もあります。不明な場合は、カメラデバイスを確認して確認してください。
GIMPで画像を開きます。次に、**画像 » カラー管理 » カラープロファイルに変換**に移動します。
カラープロファイルを適用すると、GIMPは色を失うことなく安全にsRGBに変換できるようになります。
画像 » カラーマネジメントに移動し、「カラープロファイルに変換」オプションを選択するだけです。
新しいダイアログボックスが現在開きます。
新しいダイアログボックスが開きます。「変換先」オプションを「sRGB組み込み」（または単に「組み込みRGB」と表示される場合もあります）に設定し、「変換」ボタンをクリックします。
GIMPはカラープロファイルをsRGBに変換し、画像を保存できるようになります。WordPressにアップロードしたい他の画像についても、同様の手順を繰り返してください。
WordPressの画像の色に関するよくある質問
何千ものユーザーを支援してきた長年の経験から、WordPressの画像に関して繰り返し寄せられる質問がいくつかあることに気づきました。ここでは、最もよく受ける質問への回答を紹介します。
WordPressは常に画質を低下させますか？
デフォルトでは、WordPressはウェブサイトの読み込みを高速化するために画像を圧縮します。これにより、わずかなピクセル化が発生する場合がありますが、色の損失は通常、前述のsRGBプロファイルが欠落していることが原因です。
メディアライブラリに既にアップロードされた画像の色の修正はできますか？
現在、WordPressはすでにアップロードされた画像のカラープロファイルを自動的に修正することはできません。コンピュータ上で元の画像をsRGBに変換してから、メディアライブラリに再アップロードする必要があります。
すべてのウェブ画像にとってsRGBが最適なカラースペースですか？
はい、sRGB はウェブの標準カラースペースです。ほとんどすべてのウェブブラウザとデバイスは、それを正しく表示するように設計されています。画像を sRGB に変換することで、すべての訪問者にとって色が一貫して表示されるようになります。
画像最適化に関する追加リソース
画像が適切に最適化されていることを確認するために、以下のガイドを参照してください。
- WordPressに画像を正しく追加する方法（ステップバイステップ）
- WebP vs. PNG vs. JPEG：WordPressに最適な画像フォーマット
- 画像 SEO の初心者ガイド – 検索エンジンのための画像を最適化する
- WordPressでアイキャッチ画像を一括編集する方法
- 最適なウェブデザインソフトウェアの選び方（比較）
- WordPressの画像サイズ入門ガイド（ベストプラクティス付き）
- WordPress画像圧縮プラグイン比較
この記事がWordPressでの画像の色の損失と彩度の低下を修正するのに役立ったことを願っています。また、WordPressでの画像の盗難を防ぐ方法やWordPressのメディアライブラリをクリーンアップする方法に関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Gen
これを試しましたが、画質は改善されたものの、プログラムで見るのと同じ品質の画像にはまだなっていません。他に何かできることはありますか？
WPBeginnerサポート
主にウェブセーフカラーを使用していない場合に品質が低下しますが、この方法を使用すると、他の方法と比較して品質の低下は最小限に抑えられるはずです。
管理者
シャノン・シン
手書きのイラスト/イラストレーター/フォトショップで作成したグラフィックがWordPressでうまくいかず、フラストレーションを感じていました。ほんの数色（一見すると）ですが、バランスが取れていないと幼稚園児のような見た目になってしまうため、バランスが必要です。ありがとうございました。
WPBeginnerサポート
Glad our guide could help
管理者
Joe Webmaster
これは素晴らしいです！画像の退色に気づき、問題を修正しました。長年この作業をしてきましたが、圧縮の問題だと思っていました。GIMPは完璧に機能しました。ありがとうございます！！！この解決策に今まで気づかなかったなんて信じられません。
WPBeginnerサポート
Glad our recommendation was able to help
管理者
ハーゲン
こんにちは。
この素晴らしいチュートリアルに感謝したかっただけです！
写真家から素晴らしい、高価な写真を撮ってもらったばかりで、ショップに追加したいと思っていました。
彼らがどのように見えたか見て、私たちはとても悲しくなりました。
sRGB カラーに変換すると、すべての画像が正しく表示されます。
ありがとうございます！
WPBeginnerサポート
You’re welcome, glad our recommendations could help
管理者
リチャード・シルバービート
いいヒントだけど、画像は色を「ルーズ」するのではなく、「ロス」するんだよ。Looseはtightの反対だよ。
WPBeginnerサポート
Thank you for letting us know about that typo, we’ll be sure to fix it
管理者
クリス・バイアーズ
上記の手順を実行してもまだうまくいかない場合は、カスタムCSSを削除して、スタイルシートの競合がないか確認してみてください。これで解決しました！！
WPBeginnerサポート
Thanks for sharing what fixed it for you
管理者
Ash
すべての調整を試しました（彩度とコントラストを極端に変更しても）が、毎回泥のようにくすんだ画像に戻ってしまいます。
アーティストのウェブサイトにとって、これは非常にイライラします!!!
もし誰か他の代替案を知っていたら、他の解決策の選択肢もいただけると幸いです。
ポール
RGB をカラースペースと呼び続けているため、これは混乱を招きます。RGB はカラーモデルであり、カラースペースではありません。sRGB は実際には RGB のカラースペースであるため、RGB と sRGB を対比することはできません。
RGBをAdobe RGBの略語として使用していますか？これらのカラースペース（sRGB、Adobe RGB、ProPhoto RGBなど）はすべてRGBスペースです。あなたが何を言っているのか文字通り解釈できません。
答えるべき本当の質問：WordPressはICCプロファイルを画像から削除していますか？最新のブラウザはカラーマネジメントにプロファイルを使用し始めていますが、WPがすべてを台無しにしている場合はそれができません。
これは主にグラフィックアートモニター（sRGBスペースよりも広い色域を表示するモニター）を持っている人々の問題です。タグ付けされていない画像はこれらのモニターではひどく見えます。
Julie
写真がすでに WordPress 内にあり、コンピューターにない場合はどうなりますか？
Rosa Bosma
これは素晴らしいトリックで、WordPressだけでなく、他の多くのプラットフォームでも役立ちます！例えば、より鮮やかな色でプロフィール写真をアップロードできます。
francisco cuellar
ダメでした、色はまだくすんでいます
デイジー
色落ちにずっと悩まされていて、少し気が狂いそうです。画像をRGB（sRGBとWeb用）で、考えられるすべての組み合わせでエクスポートしましたが、WordPressは私の画像から色を削除し続けています。現時点ではどうすればいいかわかりません。
サンドラ・コリンズ
これ、ありがとうございます！ロゴ画像でWPが色を紫から青に変えてしまう問題を解決してくれました。
jmdaix
Photoshopの「Web用に保存」メニューから「sRGBに変換」を有効にするのが簡単な方法かもしれません。PSDまたは元のファイルは作業スペースのままにしておき、WordPress用に良いバージョンをエクスポートするだけです。
パディ
GIMPを使用する場合も同様のプロセスがありますか？ありがとうございます。
WPBeginnerサポート
GIMPでの実行方法に関するセクションを記事に追加しました。お役に立てば幸いです。
管理者
Jaime
これはGimpでも機能しますか、それともPSだけですか？
WPBeginnerサポート
GIMPでの手順を追記して記事を更新しました。
管理者
ジョン・ブラウン
用語を何度か入れ替えています。カラースペースの名前はsRGBとAdobe RGBです。例えば、「Adobe sRGB」というものは存在しません。