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

WordPress(ワードプレス)サイトに写真を貼り付けて記事を公開した後に発生する事がある色が変わって見えてしまったり色褪せたように見えてしまう問題が昔からありましたが、一部は改善されて元の写真と同じように見えているものの、最近様々なブラウザで対応するようになったWebPでは色が変わってしまう問題がまだ起こっているようです。
この記事では色褪せたり色が変わってしまう原因について対策や対処法を考えてみました。

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

一昔前はWordPressサイトの記事に写真や画像をJPEGでアップロードしていたと思いますが、記事を公開した途端に色褪せたり色が変わってしまう事がありました。
その原因は、WordPress側で写真のリサイズをした際にICCプロファイルやカラープロファイルが外されてRGB値が変わってしまう事が理由でした。

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

それではリサイズをしないで記事に貼れば良いのではないかと思われがちですが、Widthとheightを入れないと遅延読み込みが機能しなくなり、Pagespeed insightsのスコアを下げられる原因にもなってしまうのです。

今はどうかと言うと、JPEGの場合はICCプロファイルやカラープロファイルを認識できるようになって、リサイズされても元の画像と同じ色で表示されるようになりました。
上の画像の左側が元画像で右がWordPressサイトの記事に貼ってからダウンロードした画像である事は、言われないと分からなくはなりましたね。

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

Adobe Photoshopで画像のカラースペースを変換してから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は対応しているのです。

前述した通りにWebPはリサイズした際にICCプロファイルを外して正常なカラースペースを認識できなくなるような現象が起きているので、先程カラースペースを認識できていた花手水の画像のようにそれぞれの画像を比較してみました。

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

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

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

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

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

ICCプロファイルを埋め込んでも埋め込まなくても、WebPではsRGB以外のカラースペースで書き出した画像を正常に表示できておりませんので、AdobeRGBの写真でポートフォリオのような使い方をする場合はJPEG形式でアップロードし、ウェブサイトの表示速度を早くしたい場合はsRGBで編集してからWebPで書き出して記事に貼るのがベストなのではないかと思います。
途中で変換をすると色が変わってしまうので、WebPの場合は読み込みから書き出しまでsRGBで編集するのが一番望ましいのではないかと思いますが、JPEGもいずれはWebPに強制変換されるアップデートがあるという噂もあるので、実際の所は何がスタンダードになるか分からない状態です。

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

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