How to Prevent Colour Loss in Your WordPress Images


More than one WordPress site owner has watched in dismay as images uploaded to the popular content management system lose both colour and saturation. This problem is more common than most of us realize. Why does it happen? Because colour profiles differ between graphics manipulations programs and WordPress itself. That said, you don’t have to settle for a loss of colour and saturation. There’s a quick and easy way to fix your images.

WordPress uses a standard RGB colour profile to display images. Certain graphics manipulation programs, like Adobe Photoshop, for example, use their own version of the RGB profile. Their version utilizes a different way of displaying both colour and saturation in that software environment. But outside of that environment, things are different.

When those images are uploaded to WordPress, they must be converted to standard RGB. This is what results in the loss of colour intensity and saturation. The way to solve this problem is to convert images to the standard RGB profile before you upload them. We have laid out how to do this below, in both Photoshop and a popular open source graphics program you can install if you don’t own Photoshop.

Converting in Photoshop

In Photoshop, manipulate your images in whatever way you need to to get them to look right. Save a copy of your original image under a separate name, and with the Adobe RGB profile (you should always make backup copies in case something goes wrong with the image you intend to upload.) Now, to convert the image to the standard RGB profile, click ‘File’, ‘Save for Web’. A dialogue box will appear allowing you to choose the standard RGB profile and embed the profile in your image. Embedding is not necessary as browsers do not need that information.

As an alternative, you can edit the colour settings of your graphic rather than converting it to standard RGB. Do this by clicking ‘Edit’, ‘Colour Settings’; the colour settings dialogue box will pop up. You will then need to do three things:

  1. Choose ‘North America Web/Internet’ from the first drop-down menu
  2. Choose ‘Convert to Working RGB’ in the sixth drop-down menu
  3. Click ‘OK’ to save your image

The last thing you will need to do with this option is to reopen the original image you plan to upload. If everything works as it should, it will open just fine. If you get a dialogue box warning that the colour profiles don’t match, simply choose the option to ‘Convert documents colours to the working space’ and click ‘OK’.

Converting in Gimp

Gimp is the open source version of Adobe Photoshop; it is free for Linux, Mac and Windows. Just visit the Gimp website to download and install the appropriate version for your operating system. Then you can convert graphics with embedded profiles into standard RGB format.

To do so, just open the file you intend to upload to WordPress. If Gimp detects an embedded profile, it will automatically ask you whether you want to use it or convert the image Choose the Convert option and then manipulate your graphic to your heart’s content. Export it as a .jpg or .png and you are ready to go.

Our Recommended Wordpress Web Hosting Provider


Get a 50% Discount by using our link.

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

Your email address will not be published. Required fields are marked *