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によって挙動が変わってしまう場合もありますので、筆者の環境で確認できた現象についての事を記事にさせていただいております。
画像と文章が一致していない場合はまた別の色違いが発生している場合がございますので、その際はご了承下さい。


当ウェブサイトは、実際に訪れた場所や実際に使用した物を紹介し、執筆者が感じた事を忖度無しにそのまま記事にしております。
商品のご購入や旅行などの参考として、皆様のお役に立てる記事にする事を目標に随時更新してまいります。
また、レビュー依頼などで投稿している記事についてはPRという表記をいたしますが、それ以外は実際に使用したり訪れた感想として記事を投稿しております。
またXやFacebookページなどSNSへのシェアは記事上や記事下にあるソーシャルボタンを使用すれば、簡単に共有ができます。
YouTubeチャンネルのご紹介YouTubeのロゴ
Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中!
上のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます!
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです!各種SNSでも情報を発信中!
主にFaceBookページが中心です!

FacoBook ロゴ
Threads(スレッズ)のアイコン

instagramロゴ

関連記事

  1. サーチコンソールのエラー

    Word PressのXMLサイトマップ作成プラグイン!Sitemap Pro by BestWebSoftで確実にインデックス登録!

  2. Ultimate XML Sitemaps Generator for Googleのインストール

    動画と写真のXMLサイトマップもインデックス可! Ultimate Google XML Sitemaps Generator Proのレビュー

  3. WordPressで記事を書いて3か月目 100記事のPV数やアドセンス収益を公開!

    WordPressで記事を書いて3か月目 100記事のPV数やアドセンス収益を公開!

  4. AMP for WP Accelerated Mobile Pages plugin

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

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

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

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

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

  7. XサーバーのXPageSpeedの設定

    TCD GENSENのヘッダーバー検索機能が使えなくなったけど対処法を発見!WordPressサイトのトラブル!

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

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

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

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

  10. Word Pressプラグイン Your Channel

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

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

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

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

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

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

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

  1. モバイルバッテリーで給電YUKIMOTO電熱ヒーターベストのレビュー

    寒い冬もモバイルバッテリーで温まる!オススメのDC…

  2. 宮城県蔵王町 みやぎ蔵王えぼしリゾート えぼし雪上花火大会

    2024年 みやぎ蔵王えぼしリゾート えぼし雪上花火大…

  3. 肘折温泉を彩る冬花火 2024年 肘折幻想雪回廊 | 山形県大蔵村

    肘折温泉を彩る冬花火 2024年 肘折幻想雪回廊 | 山形…

  4. プロスタッフCCウォーターゴールドの撥水効果

    自動車の車内清掃や洗車にオススメ!便利なメンテナ…

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

    WordPress管理画面のレイアウト崩れの簡単な修正方法…

  6. Yuumo+ マッハドライヤーの吸水力

    洗車後の水滴を残さない吸水力最強レベルのマイクロ…

  7. 誕生日プレゼントにMURA(ムラ)の長財布をいただきました!

    誕生日プレゼントにお洒落なMURA(ムラ)の長財布をい…

  8. ATEnge充電式電動エアダスターのレビュー!パソコンや車内清掃にも最適で経費も削減!

    ATEnge充電式電動エアダスターのレビュー!パワフル…

  9. 2019年 みやぎ蔵王えぼしリゾート えぼし雪上花火大会

    2024年2月3日にみやぎ蔵王えぼしリゾートで、えぼし…

  10. Amazonタイムセール祭りを2024年2月1日9時から開催!87時間限定のビッグセール!

    Amazonタイムセール祭りを2024年2月1日9時から開催!…

カテゴリー

Japan Videography YouTubeチャンネルロゴ

写真素材のピクスタ