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

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

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

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

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です!
YouTube チャンネルリンク
各種SNSを運営中!フォローや登録はこちら!
YouTubeチャンネル
Bluesky
Fecebook
threads
instagram



関連記事

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

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

  2. 内部検索スパム サーチコンソールの未登録件数

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

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

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

  4. WordPress ブログ記事を書き始めて10ヶ月目のアクセス数や収益は?

    WordPress ブログ記事を書き始めて10ヶ月目のアクセス数や収益は?

  5. AMP for WP Accelerated Mobile Pages plugin

    WordPress 超高機能AMPプラグイン AMP for WP– Accelerated Mobile Pages

  6. ワードプレスプラグイン Autoptimizeの導入サムネイル画像

    Autoptimizeの設定方法!CSS、JavaScript、画像を最適化してWordPressを高速化するプラグイン!

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

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

  8. Google サーチコンソール サイトマップ送信

    WordPressでブログ開設して1ヶ月目の記事数、アクセス数や収益は?

  9. WordPressでブログ記事を書いて4か月目 137記事のPV数や収益などを公開!

    WordPressでブログ記事を書いて4か月目 137記事のPV数や収益などを公開!

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

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

  11. udinra sitemap proの購入

    Udinra Sitemap pro|WordPress画像・動画サイトマップ作成プラグインの使用方法

  12. WordPressを始めて3ヶ月で1万PV達成!!ブログのアドセンス収益も上昇中

    WordPressを始めて3ヶ月で1万PV達成!!ブログのアドセンス収益も上昇中

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

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

  1. モバイル端末でウェブサイトをスクロールできない問題を解決したサムネイル画像

    モバイル端末でウェブサイトのスクロールが止まる原…

  2. 90系ヴォクシーハイブリッドの搭載した15Lの車載ポータブル冷凍冷蔵庫のサムネイル画像

    ポータブル冷凍冷蔵庫でキャンプやドライブ、震災等…

  3. 湯殿山総本寺 瀧水寺大日坊の本殿

    即身仏「真如海上人」を安置する湯殿山総本寺 瀧水寺…

  4. 寒河江ダムにある月山湖大噴水が最大高まで水柱を上げる画像

    日本一! 寒河江ダムの高さ112mまで上がる月山湖大噴…

  5. 詐欺通販サイトのURLが表示された商品ページ

    騙されない!詐欺通販サイトや偽ECサイトを簡単に見…

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

    WordPressを高速化!95点から100点を取れる軽量爆速…

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

    YouTubeのサムネイルをキャッシュして高速化するプラ…

  8. ワードプレスプラグイン Autoptimizeの導入サムネイル画像

    Autoptimizeの設定方法!CSS、JavaScript、画像を最…

  9. 活き生き田園フェスティバルファンタジック花火ショー スターマイン

    花火大会や食などを楽しめるお祭り!2024年 第35回 …

  10. 福島県南相馬市小高区 相馬野馬追 火の祭 フィナーレスターマインと2尺玉

    2024年 相馬野馬追 火の祭 二尺玉やスターマインなど…

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

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




Amazonトップページバナー