Fix Image Color & Saturation Loss in WordPress

Have you ever uploaded a colorful and crisp image into WordPress only to see it loose color saturation and exhibit tonal degradation? If so, you aren’t alone. Let’s fix that. But first, let’s see why this is happening in the first place.

Color Space Conflicts

Many photographers shoot in Adobe RGB color space because it has a wider color range, meaning colors are more diverse and therefore accurate. The internet prefers sRGB mode, and herein lies the problem. WordPress developers explained it like this:

Any time an image is uploaded, if that image was saved in the Adobe RGB color space, then the image does not get loaded correctly for resizing. Thumbnails are saved in the default color space, which is sRGB. By failing to perform the color conversion, and then failing to specify the non-default color space in EXIF, thumbnails are produced with colors that are noticeably different from the original.

Convert To sRGB Before Uploading

If you convert your images to sRGB mode before uploading into WordPress, you will notice a world of difference. You will also be able to accurately color correct your images in anticipation for how they will look on the web.

Related tutorial: Improve image quality in WordPress

11 responses to “Fix Image Color & Saturation Loss in WordPress”

  1. Old Mango Avatar

    i wonder if facebook also applies this to photos that are upload, they never look the same, thanks for the article!

    1. Graph Paper Press Avatar

      More than likely @twitter-204906526:disqus

      1. Billy Suratt Avatar

        Actually, it seems Facebook reads the embedded color profile, then converts it to its own stripped-down version of sRGB which one of their engineers likes to call “TINYsRGB” (but which shows up in Photoshop as “c2” when I open a photo downloaded from Facebook). Here’s an interesting look at why they decided to create their own color profile: https://www.facebook.com/note.php?note_id=10150630639853920

  2. Mike Gertrudes Avatar

    Thanks man- this worked perfectly.

  3. Dan Jones Avatar
    Dan Jones

    THANK YOU! This thread saved my life! Literally. Well, not literally, but extremely significantly in a figurative sense. If I could have your babies, I would.

  4. Fiona Humberstone Avatar

    Thank you. You’ve made me **very** happy 😉

  5. Billy Suratt Avatar

    Converting to sRGB before uploading is fine if you’re just uploading a photo for online display, but not if you’re uploading a photo intended for sale as a digital download to professional photo buyers (editorial and commercial) and want to sell the highest quality originals using your Sell Media plugin. Ideally, we should be able to upload Adobe 1998 or ProPhoto files, have WordPress leave the originals untouched and have Web previews and thumbnails converted to sRGB when they’re generated.

    It’s a complicated issue and a niche that probably only appeals to pro photographers, but I wonder if it might be possible to create an extension for Sell Media that handles color management more appropriately since the WordPress core doesn’t (and likely never will, from the look of things)? Between ImageMagick and Little CMS (http://www.littlecms.com/), it seems like the necessary tools are available if somebody could just figure out how to put all the pieces of the puzzle together.

    Until that time, it doesn’t look like Sell Media will be a truly viable alternative to Photoshelter for anybody who shoots in a wider-gamut color space than sRGB, which is a tragedy.

  6. mm Avatar

    instead of managing the color profiles properly, just ask your users to fuck their pictures 😀 very open-source approach…

  7. Jody Steyls Avatar

    Even when I use sRGB exports, the issue is when I bulk upload them, they become crappy. When I upload them individually, the photos stay crispy and saturated as they are meant to be.

    Anyone else who faced this issue?

  8. Erik Lindtorp Avatar

    Hi
    I already have sRGB IEC61966-2.1 set in color settings in photoshop and I still get the loss of color. Workaround right now is to take a print screen of the image in photoshop and then import to photoshop to crop to correct size and then save to jpeg and upload. any idea? Adobe RGB (1998) is not working eaither.

Leave a Reply

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