WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Fix Image Color and Saturation Loss in WordPress

How to Fix Image Color and Saturation Loss in WordPress

Last updated on January 20th, 2016 by Editorial Staff
217 Shares
Share
Tweet
Share
Pin
Special WordPress Hosting offer for WPBeginner Readers
How to Fix Image Color and Saturation Loss in WordPress

Recently, one of our readers asked us for a way to prevent image color and saturation loss in WordPress? This is a common problem faced by many WordPress users uploading photos and images. In this article, we will show you how to fix image color and saturation loss in WordPress.

Image color and saturation loss in WordPress

Why Some Images Loose Colors and Saturation in WordPress?

Many photographers capture photographs using Adobe’s RGB color space which has more colors and offer much better results.

However most web applications like WordPress, use RGB color space. When you upload your image, WordPress creates several image sizes. These images use RGB color space which has less colors than Adobe’s RGB format.

WordPress also uses compression on the resized images which may also contribute to slight quality loss. Here is how you can increase or decrease WordPress jpeg image compression.

Images captured with Adobe sRGB color space are more vibrant and accurately display colors in high tones. When converted by WordPress, those vibrant colors are replaced with slightly muted tones.

Color and saturation loss in WordPress

Having said that, let’s see how we can prevent this image color and saturation loss in WordPress.

Fix Color and Saturation Loss for Images in WordPress

The easiest way to fix this is by converting your images to RGB color space before uploading them to WordPress. This can be easily done using Adobe Photoshop.

Method 1:

Open your image in Adobe Photoshop and then click on File » Save for Web….

Save for web in Adobe Photoshop

This will bring up the save for web dialog box, where you can check the box to convert the image in RGB and save it. You can also embed color profile with your image. Though it will not have much affect on browsers read an image.

Converting colors to RGB and saving for web in Adobe Photoshop

Method 2:

Use this method if you are not satisfied with the result of the first method.

In Adobe Photoshop, go to Edit » Color Settings. This will bring up the color settings dialog box.

Changing color management policies in Adobe Photoshop

You need to select ‘North America Web/Internet’ from the settings drop down menu. Next, under color management policies section, select the RGB to ‘Convert to Working RGB’. After that click on the OK button to save your settings.

Now you need to open the original photograph or image that you wanted to upload. If the working space profile mismatches, Photoshop will show a warning and will ask you what to do.

Mismatch Color Profile

You should select ‘Convert document’s color to working space’ and then click OK. Your photo’s color profile is now more accurately converted. You can now save the image to preserve your changes.

Repeat the process for all the images that you want to upload. Now you can safely upload these converted images without any color or saturation loss in WordPress.

Fix Color and Saturation Loss in WordPress with GIMP

Gimp is the powerful free alternative to Adobe Photoshop. You can use it to convert the color space for your WordPress uploads.

GIMP basically detects each image you try to open to see if it has a color profile embedded. In case your image is in Adobe sRGB color space, then GIMP will automatically show you a dialog box to convert it.

GIMP detecting and suggesting to covert color space

Sometimes an image may not have an embedded color profile or GIMP may fail to read it correctly. In that case you will need to manually change color space.

First you need to know what color space your photograph may be using. We are assuming that it is Adobe sRGB, but it could be different. Check your camera device to figure this out if you are unsure.

GIMP does not have Adobe sRGB profile built-in. You will need to download Adobe sRGB ICC Profile to your computer.

Select your operating system and then follow on screen instructions. You will be able to download ICC profiles in a zip file. Extract the zip file and inside it you will notice AdobeRGB1998.icc file.

Once you have downloaded the ICC profile. Simply open your image with GIMP and click on Image » Mode » Assign Color Profile…. This will bring up a dialog box like this:

Assign color profile in GIMP

Click on the drop down menu and then locate the ICC profile you downloaded earlier. Click on Assign button to apply it.

Once you have applied the color profile, GIMP can now safely convert it to RGB without losing colors. Simply click on Image » Mode » Convert Color Profile…

Converting color profile in GIMP

GIMP will now convert the color profile to RGB and you can save your image. Repeat the process for other images you want to upload to WordPress.

We hope this article helped you fix image color and saturation loss in WordPress. You may also want to see our guide on 4 ways to prevent image theft in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

217 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

13 Comments

Leave a Reply
  1. Ash says:
    Jan 15, 2018 at 4:21 am

    tried all the adjustments (even to an extreme change of saturation and contrast) and every time it strips it back to a muddy dull pic.

    this is very frustrating for an artists website!!!
    some other solution options would be appreciated if anyone knows other alternatives to this problem plz

    Reply
  2. Paul says:
    Sep 5, 2017 at 7:00 pm

    This is confusing, because you keep referring to RGB as a colorspace. RGB is a color model, not a color space. You can’t contrast RGB with sRGB, because sRGB is a color space that is in fact RGB.

    Are you using RGB as shorthand for Adobe RGB? All of these color spaces … sRGB, Adobe RGB, ProPhoto RGB, etc., are RGB spaces. I literally don’t know how to interpret what you’re saying.

    The real question that needs to be answered: is WordPress stripping the ICC profiles from the images? Modern browsers are starting to use the profiles for color management, but they can’t do it if WP is jacking everything up.

    This is mostly a problem for people who have graphic arts monitors … ones that show a wider color gamut than the sRGB space. Untagged images look terrible on these.

    Reply
  3. Julie says:
    Mar 10, 2017 at 9:38 am

    What if your photos are already inside of wordpress and you don’t have them on your computer?

    Reply
  4. Rosa Bosma says:
    Oct 17, 2016 at 5:47 am

    This is an awesome trick, not just for WordPress, but many other platforms as well! E.g., it allows you to upload a profile picture with much more vivid colours.

    Reply
  5. francisco cuellar says:
    Jun 24, 2016 at 7:06 pm

    NOPE didnt work, colors still dull

    Reply
  6. Daisy says:
    Feb 4, 2016 at 6:42 am

    I have been struggling with the color loss a lot now and it is driving my slightly insane. I have been exporting my images as RGB, both sRGB and the web one in all possible combinations and WordPress is still stripping the color from my images. I don’t know what to do at this point.

    Reply
  7. Sandra Collins says:
    Jan 19, 2016 at 10:52 am

    Thank you for this! It solved a problem I was having with a logo image where WP changed the color from purple to blue.

    Reply
  8. jmdaix says:
    Jan 19, 2016 at 9:14 am

    May be an easy way to do this is to enable “Convert to sRGB” from the Photoshop “Save For Web” menu. You will keep your psd or original file with your working space and just export a good version for WordPress.

    Reply
  9. Paddy says:
    Jan 18, 2016 at 2:41 pm

    Is there a similar process when using GIMP? Thanks.

    Reply
    • WPBeginner Support says:
      Jan 18, 2016 at 9:15 pm

      We have updated the article with section on how to do this in GIMP. Hope this helps.

      Reply
  10. Jaime says:
    Jan 18, 2016 at 1:32 pm

    Will this work for Gimp, or only PS?

    Reply
    • WPBeginner Support says:
      Jan 18, 2016 at 9:15 pm

      We have updated the article with instructions on how to do this with GIMP.

      Reply
  11. Jon Brown says:
    Jan 18, 2016 at 11:05 am

    You interchanged terms several times. The color space names are sRGB and Adobe RGB. For example there is no such thing as “Adobe sRGB”.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.