WordPressサイトの写真や画像が色褪せたり色が変わる原因の対策や対処法

WordPress（ワードプレス）サイトに写真を貼り付けて記事を公開した後に、元の写真と色が変わって見えたり、色褪せたように表示されたりする問題が昔からありました。一部の画像形式では改善が進み、元の写真とほぼ同じ色で表示されるようになったものの、近年さまざまなブラウザで対応が進んでいるWebP形式では、依然として色が変わってしまう現象が発生する場合があります。
この記事では、WordPressにアップロードしたJPEGやWebP画像の色が変わる原因について、ICCプロファイルやカラースペースの違いを比較しながら、その対策や対処法を考えてみました。

WordPressサイトで色が変わらなくなったJPEG画像

一昔前は、WordPressサイトの記事に写真や画像をJPEG形式でアップロードするのが一般的だったと思いますが、記事を公開した途端に色褪せたり、元の写真とは違う色に変わってしまったりする事がありました。
その原因の一つが、WordPress側で写真をリサイズした際にICCプロファイルやカラープロファイルが削除され、画像のRGB値が本来とは異なるカラースペースとして解釈されてしまう事でした。

左側が元画像で、右側がWordPressで誤ったカラースペースとして表示された画像です。
それぞれの数値は左からR・G・Bの順番に並んでいるのですが、赤は暗くなり、緑は完全に色相がずれているほか、青も若干赤寄りに転びながら少し暗くなっているのが分かると思います。
以前は、WordPress側で画像をリサイズした際にカラープロファイルが外されてしまい、写真を編集した時の色と記事に貼り付けた写真の色が全く違うものになっていたのです。

それでは、リサイズをしないで記事に貼れば良いのではないかと思われがちですが、画像の表示サイズに合わせたリサイズは、ウェブサイトの表示速度を改善するうえでも重要です。また、widthとheightの指定がないと、WordPress側で遅延読み込みが適用されない場合があるほか、画像の表示領域が確保されずにレイアウトがずれてしまい、PageSpeed Insightsのスコアにも影響するため、単純にリサイズを避ければ良いという問題でもないのです。

今はどうかと言うと、JPEGの場合はICCプロファイルやカラープロファイルを保持したまま画像をリサイズできるようになり、少なくとも今回の検証環境では、元の画像とほぼ同じ色で表示されるようになりました。
上の画像は、左側が元画像で、右側がWordPressサイトの記事に貼り付けてからダウンロードした画像なのですが、言われなければ違いが分からないほどになりましたね。

カラースペースを変換したJPEG画像の比較

Adobe Photoshopで画像のカラースペースを変換してからWordPressにアップロードした花手水の写真ですが、色域の違いによる若干の差はあるものの、編集時とほぼ同じ色の画像が記事に表示されています。
WordPressの記事から画像をダウンロードして確認してみると、アップロード時のカラースペースがそのまま維持されていたため、今回の環境では、画像をリサイズする際にもカラープロファイルが保持され、アップロード時の色が保たれている事が分かります。

Display P3で書き出したJPEG画像

Adobe RGBで書き出したJPEG画像

sRGBで書き出したJPEG画像

sRGBに変換してカラープロファイルを埋め込みして書き出したJPEG画像

sRGBに変換してカラープロファイルを埋め込まずに書き出したJPEG画像

カラースペースを変換して編集した際の若干の違いはありますが、ICCプロファイルやカラープロファイルが正しく認識されていれば、WordPress側で画像をリサイズしたとしても、元の画像とほぼ同じ色で表示されているのが分かると思います。
ただし、これは画像圧縮プラグインなどによる追加の変換処理を行っていない状態での話で、プラグインや画像処理環境によってはカラープロファイルが削除されてしまう可能性もあるため、sRGB以外のカラースペースで書き出した画像については、正常に表示できているのであれば余計な変換処理を行わない方が望ましいと思います。

WebP画像でカラースペースが正しく反映されない現象

以前は、JPEG画像をWordPressにアップロードしてリサイズした際にICCプロファイルが外れ、写真の色が変わってしまう現象が起きていた事を説明しましたが、現在は次世代画像フォーマットとして主流になりつつあるWebPでも、同じような色の変化が発生する場合があります。
WebPとは、Googleが開発した高圧縮率を誇る画像形式で、JPEGと比較して同等の画質でファイルサイズを約25～34％小さくできるほか、PNGのように背景を透過させる画像にも対応しています。

WebP自体はICCプロファイルの埋め込みに対応している画像形式なのですが、WordPress側でのリサイズや画像の変換処理、表示環境などによってはカラープロファイルが正しく反映されず、元の画像とは異なる色で表示される場合があります。
そこで、先ほどJPEG画像ではカラースペースの違いを正しく認識できていた花手水の写真について、今度はWebP形式で書き出した画像を用意し、それぞれのカラースペースやICCプロファイルの有無によって、どのような違いが生じるのか比較してみました。

Display P3のICCプロファイルを埋め込んだWebP画像

Adobe RGBのICCプロファイルを埋め込んだWebP画像

sRGBのICCプロファイルを埋め込んだWebP画像

ICCプロファイルを埋め込まないsRGBのWebP画像

ICCプロファイルを埋め込まないAdobe RGBのWebP画像

今回の検証環境では、ICCプロファイルを埋め込んだ場合でも、WebP形式でsRGB以外のカラースペースを使用して書き出した画像が正常な色で表示されておらず、JPEG形式とは異なる結果になりました。
また、ICCプロファイルを埋め込まずにAdobe RGBで書き出した画像についても、本来のカラースペースが正しく認識されないため、色が変わって表示されてしまいます。

この結果から、Adobe RGBなどの広色域で編集した高画質な写真をポートフォリオとして掲載する場合は、ICCプロファイルを埋め込んだJPEG形式でアップロードし、ウェブサイトの表示速度を優先する場合は、sRGBに変換してからWebP形式で書き出して記事に貼り付けるのが、今回の環境では最も安定した方法なのではないかと思います。
WebPの場合は、途中でカラースペースを変換すると色域の違いによって見た目の色が変わる場合もあるため、読み込みから書き出しまでsRGBで編集するのが望ましいのではないかと思いますが、JPEG画像のアップロード時にWebPを自動生成する仕組みもWordPressで提案されており、当時はその導入方法について再検討が行われていたため、実際のところ今後何がスタンダードになるのか分からない状態です。

映像と写真の両方で、カラースペースやガンマ値の異なる規格が乱立しすぎており、WordPressやYouTubeなど、さまざまな場所で規格通りの色で表示できなかったり、次世代画像フォーマットであるAVIFも一部のブラウザでは対応していなかったりと、このカオスな状態は一旦整理してもらわないと困りますよね・・。

また、キャッシュプラグインやCDNなどを使用した画像配信の仕組み、ブラウザやOSの違いによっても挙動が変わってしまう場合がありますので、この記事では筆者の環境で実際に確認できた現象について紹介させていただいております。
掲載している画像と文章の説明が一致していない場合は、閲覧環境によって別の色違いが発生している可能性もございますので、その際はご了承下さい。