Why images change colours when uploaded to WordPress

Have you ever processed your images in any type of image editing software (Photoshop, Lightroom, Aperture etc) and then uploaded them to WordPress, ending up with photos that look completely different in your browser to how they looked in your software? Seeing all your edits disappear, colors fade and all the images go awfully ‘soft’ sound familiar? If the answer is yes – then worry no more, fixing it is really simple and you are only three steps away from stopping WordPress from messing with the colours of your photos and instead, displaying them exactly how you see them in your software.

This is what I mean:

images looking dull in wordpress

See the difference? It is the same image but saved differently in Lightroom. All the difference is down to three settings you choose when exporting/saving your photos in editing software.

I am shooting RAW and doing all my post-processing in Photoshop and/or Lightroom. Not that long ago I noticed that some of my photos that I edited for the blog, looked good in the software – they were sharp, bright and with vivid colours. However, the moment I uploaded them to WordPress, they appeared ‘soft’, dull and the colors faded terribly. So why was WordPress changing the colors and appearance of my photos?

I have discovered that what an image is going to look like in WordPress depends on my settings when exporting/saving the edited images. The three settings that really affect how my photos look in WordPress are:

  • image size
  • color mode
  • sharpening

Image size is related to your chosen WordPress theme – in my theme the settings are set to max 500px wide for a large image. This means that whenever I upload a photo that is wider than that, WordPress has to resize it for me down to 500px, messing with colours and sharpness in the process.
Tip here: always resize your images to the precise maximum width for the large photos for your theme. Npt sure what that figure is? You can look it up your menu in Settings –> Media

Color mode is another important factor affecting how your photos appear in WordPress. RGB, the right color mode for saving images for web, has got few sub types, that can also mess with your images. The mode you want when preparing photos for your blog post will always be sRGB, as opposed to for example AdobeRGB. Tip here: Make sure you set the colour mode when exporting/saving your images. (In Photoshop it is under ‘Save for the Web’ under ‘File’ menu; in Lightroom it is one of the options you can choose after right clicking on the image and then going ‘Export’).

Sharpening is a clever little option I often use when exporting my images from Lightroom. It is one of the options I can choose when saving my file and it makes a world of difference to how sharp the image appears on web. I noticed it affects hugely whether your image will stay how you see it in the editing software. Tip here: Tick the box and select ‘High’ as the amount. Just make sure you do not over-sharpen the image earlier in the editing process or otherwise you are just going to make it worse.

How to save images in Lightroom to ensure they do not change when uploaded to WordPress and appear exactly how you see them in your software:

exportscreenjjpg

Easy, isn’t it?

11 thoughts on “Why images change colours when uploaded to WordPress

    • Glad these few little steps helped! I was so annoyed when I realised all my edits were disappearing the minute they’ve gone up on wordpress and so relieved to find there was a quick fix to it!

  1. I’m afraid this didn’t work for me. In fact, the resized image in sRGB looked worse than the original. I even placed the images side-by-side for comparison.

  2. thank u so much.. i’ve been disappointed and thought this was an issue with GD library from my host. I never thought this was easy.. =)

  3. Pingback: Brightening photos? How Dull « Cake Diem

  4. This problem has been bugging me for ages! I spend so long trying making my photos beautiful in Photoshop only for them to come out dull online. This post has helped me considerably more than other articles on the subject. Thank you.

Leave a Reply to Bunty Varma Cancel reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>