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. 内部検索スパム サーチコンソールの未登録件数

    目障りなSEO To66.Asia 内部検索スパムをRobots.txtでブロックしてクロール禁止に

  2. 記事の最後に定型文を自動表示するWord Pressプラグイン!Add Widget After Content

    記事最後に定型文を自動表示するWordPressプラグイン!Add Widget After Content

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

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

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

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

  5. Flying Scriptsで高速化する前後のPagespeed Insightsのスコア比較

    WordPress高速化プラグインFlying Scripts|重いアドセンス等のJavaScript遅延読み込み

  6. WordPress プラグイン Google XML Sitemapsの設定・使用方法

    WordPressプラグイン XML Sitemap Generator for Googleで検索インデックス登録!

  7. WordPressサイトの記事をXでシェアした時にカードを大きく表示する方法

    WordPressサイトの記事をX(旧Twitter)でシェアした時にカードを大きく表示する方法

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

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

  9. WordPressサイトのレイアウト崩れ修復方法

    WordPress管理画面のレイアウト崩れ修正方法!原因はレンタルサーバーの高速化機能

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

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

  11. WordPress 常時SSL化とサブディレクトリからサブドメインへの301転送設定

    WordPressのサブドメインサイト、常時SSL化とサブディレクトリからリダイレクトする301転送設定

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

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

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

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

  1. EXPO2025ブルーインパルス大阪・関西万博フライトの演目

    EXPO2025 ブルーインパルス 大阪・関西万博の展示飛…

  2. 栃木県那須郡那須町 駐車場から眺める殺生石園地全景の景色

    九尾の狐の那須伝説が残る国指定名勝「殺生石」|栃…

  3. SOFT99 ディグロス 鬼黒 タイヤワックスのパッケージ

    自然な黒艶で美しく保護!SOFT99の水性タイヤワック…

  4. 楽天モバイル×富士ソフト ポケットWi-Fi FS050W

    楽天モバイルをWi-Fi専用で使用!富士ソフトのモバイ…

  5. ザハトラーFSB8へのHaoge Tie Down Short Threadedノブ取り付け風景

    短くて激安!ザハトラービデオ三脚雲台用ボールクラ…

  6. DHLの国際配送で日本に届くまでの荷物追跡履歴

    DHLで荷物を国際発送・受け取り 到着日数や荷物の追…

  7. 尺玉のド迫力を体感!三条夏まつり大花火大会 | 新潟県三条市

    三条夏まつりは2025年7月25日から開催!26日に花火大…

  8. 宮城県登米市 伊豆沼はすまつり

    遊覧船で蓮の花を観賞!伊豆沼・内沼はすまつり開催 …

  9. 2023年 大曲の花火 全国花火競技大会 大会提供花火

    大曲全国花火競技大会は2025年8月30日に開催!有料観…

  10. 2023年 神明の花火 グランドフィナーレ

    神明の花火は2025年8月7日に開催!有料観覧席も販売…

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

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




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

記事内の目次