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

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

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

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

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

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

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

元画像とWordPressにアップロードした画像の比較

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

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

Adobe Photoshopで画像のカラースペースを変換してからWordPressにアップロードをした花手水の写真ですが、色域の違いによる若干の違いはあるものの、編集時とほぼ同じ画像が記事に表示されているのです。
ワードプレスの記事から画像をダウンロードしてみると、アップロード時のままカラースペースが変わっていなかったので、リサイズをする時にもカラープロファイルを外さずにアップロード時のままの色を保っている事が分かります。

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

カラースペースを変換して編集した時の若干の違いはありますが、ICCプロファイルやカラープロファイルを認識して、WordPress側でリサイズをしたとしても元の画像と同じように表示されているのが分かると思います。
何もしない状態での話なので、画像圧縮プラグインなどを使用すると、カラープロファイルを認識できない状態になる可能性も高いので、sRGB以外の画像をアップロードしたら何もしないのが望ましいです。


WebPはカラースペースを認識できていない

sRGBとAdobe RGBのRGB値を比較した画像
JPEG画像をWordPressにアップロードしてICCプロファイルが外れた際に色が変わってしまうという事が昔は起きていたという事を説明していましたが、今は次世代画像フォーマットとして主力になりつつあるWebPで同じ現象が発生しております。
WebPとは、Googleが開発した高圧縮率を誇る静止画像形式で、JPEGより25-34%のファイルサイズの圧縮を可能にした他、PNGのような背景を透過させるような画像もWebPは対応しているのです。

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

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

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

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

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


YouTubeチャンネルバナー

Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中!
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます!
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです!

最新の更新情報を受け取れる各種SNSを運営中!フォローや登録はこちら!


X Postをタップして、@jvcameratravelを付けたまま記事をX(旧・Twitter)でシェアをすると、弊社運営のXアカウントにてあなたのポストをリポストするアカウント拡散キャンペーンを行っています。
不要な時は@jvcameratravelは外してね!

関連記事

  1. WordPress6.5とXアクセラレータの不具合

    WordPress 6.5 Redinaアップデート!XアクセラレータVer.2で504の不具合

  2. 自動読み込みがリスクになっているWordPressサイト

    WordPressプラグインの入れすぎがダメな理由を解説!アンインストール後も注意!

  3. udinra sitemap proの購入

    【公開終了】Udinra Sitemap pro – WordPress画像・動画サイトマップ作成プラグインの使用方法

  4. 肘をつき悩む女性 [モデル:Lala*]

    WordPressでブログを書き始めて1か月目から11ヶ月目のアクセス数と収益、SEO対策や記事の書き方も!

  5. 閉鎖したサブドメインのWordPressサイトから新サブドメインに301リダイレクトする方法 サムネイル画像

    閉鎖したサブドメインのWordPressサイトから新サブドメインに301リダイレクトする方法

  6. オプション設定で添付ファイル自動生成ページが有効化になっている

    画像がサーチコンソールで未登録!WordPressメディア添付ファイルページを無効化する方法

  7. WP YouTube Lyteの設定方法サムネイル画像

    YouTubeのサムネイルをキャッシュするWordPress高速化プラグインWP YouTube Lyte

  8. WordPressを高速化するプラグイン3選 サムネイル画像

    WordPressを高速化!95点から100点を取れる軽量爆速の無料プラグイン3選

  9. Xサーバーの高速化設定ページのサムネイル

    エックスサーバーの高速化設定!レンタルサーバーのパフォーマンス向上で快適に!

  10. 重いプラグインを減らしてWordPressサイトを高速化!読み込みを快適にして直帰率を下げるのがオススメ!

    重いプラグインを減らしてWordPressサイトを高速化!読み込みを快適にして直帰率を下げるのがオススメ!

  11. Word Pressプラグイン Your Channel

    Your Channel | Youtubeチャンネルを埋め込むWordPressプラグイン

  12. ウェブサイト管理者向け!汚い美容系広告だけをブロックして収益を減らさず離脱率を下げる方法

    ウェブサイト管理者向け!汚い美容広告をブロックして離脱率を下げて収益も向上

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  1. 宮城県仙台市 榴岡公園の枝垂桜-夜桜ライトアップ

    榴岡公園 桜まつり 2025年3月27日から開催! ステージ…

  2. 仙台西公園で咲く満開の桜 とお花見を楽しむ人々

    桜名所 仙台西公園でお花見とステージイベントは2025…

  3. 山形県大蔵村 肘折温泉 いでゆ館

    山形肘折温泉の日帰り入浴施設 肘折いでゆ館が2025年…

  4. 茨城県石岡市の枝垂れ桜の名所 常陸風土記の丘

    枝垂桜が美しい常陸風土記の丘さくらまつりを2025年3…

  5. 青森県弘前市 弘前公園の桜

    世界に誇る桜名所! 弘前公園 さくらまつりは2025年4…

  6. 佐賀県武雄市 御船山楽園 花まつりの桜 夜桜ライトアップ

    九州武雄温泉の桜名所 御船山楽園 花まつりは2025年3…

  7. 宮城県 平筒沼の桜と桟橋

    お花見スポット 平筒沼ふれあい公園桜まつりは2025年…

  8. 夜桜も美しい桜名所 涌谷城址 城山公園 わくや桜まつり|宮城県涌谷町

    涌谷城址 城山公園 わくや桜まつりを2025年4月4日か…

  9. 船岡城址公園の夜桜ライトアップ

    船岡城址公園で花見と夜桜!しばた桜まつりを2025年4…

  10. 宮城県大河原町 白石川堤一目千本桜

    白石川堤一目千本桜 おおがわら桜まつりは2025年4月1…

楽天トラベルのバナー画像

よく読まれている人気記事ランキング




Amazonトップページバナー
楽天モバイルアフィリエイト