: Problem with colors when uploading images to Facebook I'm having problems uploading a PNG file to the web. The problem is that it distorts the color of the image. The image is a trademark

@Murray976

The solution – use PNG format!

If you are reasonably savvy with image formats and graphics software, try saving your image as a PNG 24. This may well give you a higher file size to start with, but in our experience, Facebook is not applying compression to PNGs. Of course, this might change in the future, but for now this is our solution.

Vote Up Vote Down

@Ogunnowo857

In short

Facebook compresses and changes the colour profile of your images. The resulting image most of the time is distorted and the colours are inconsistent across browsers.

The problem

Facebook's interface is heavy with images: thumbnails, albums, cover photos, profiles, lolcats. In order to keep the total weight of the page under control, Facebook "optimizes" (i.e. compresses) every image you upload. It also replaces your original colour profile (even if it is sRGB) with a specially crafted one.

The reason for the replacement of the profile is the same as the reason for compressing: to reduce the size of the image.

The Facebook developers want the images to look good. There are too many colour geeks (like us) in the world. The developers know that in order to make the colours render properly they need to embed the colour profile in every image: some browsers will go nuts and get very creative with their palette if you don't tell them explicitly what colour profile to use.

They noticed, though, that if they embedded the original sRGB profile in every single image, including thumbnails, the total weight of the page was going to be way too high. Consider that the original full fledged sRGB profile description would add ~3KB overhead to every image. So, in order to save some bytes, they crafted a special version of the sRGB profile that results in smaller overheads than the original one (~524B instead of ~3KB). Read more here.

Every image you upload gets modified to use this profile. Supposedly their version of the sRGB profile (which they call TinySRGB) should render the same results than its grandfather version. Unfortunately not every browser handles custom embedded profiles as gracefully resulting in discrepancies. Apparently they also forgot to apply the profile to some of the images (as you can see reading the comments on the developer's blog entry linked above) so the colours across Facebook might also be inconsistent.

The (non existent) solution

Unfortunately there seems to be no definitive solution for this problem. There are some heuristics I suggest in order to try to circumvent the problem


Be sneaky. Keep you images as small as possible to try and discourage Facebook's compression.
Keep surprises to a minimum. Try to find Facebook's ICC profile and use it as part of your workflow so at least you can see how the image will look before you save it. I failed on trying to find it, though. The links I found were dead. If you do find it, please share!
Give up. Accept that, like other media, Facebook uses their own colour space. We cannot change that, the same way we cannot change the whole print industry to use a wider colour space than CMYK. In a similar way that CMYK sucks at rendering fresh greens because the C ink is so weak, Facebook sucks at rendering certain hues. They seem to be reddish hues most of the time. Accept that there will be a colour shift and work with it in mind.


Final comment

The Facebook team changes their application whenever they feel the need to change it. And they should, since it is theirs to change. Although it does not make it less annoying, maybe we should keep it in mind and adjust our expectations accordingly.

You might wake up one morning and discover that, after Facebook rolled out their latest update, your grandma is giving thumbs up to the pictures of your latest crazy party, even when you carefully crafted your privacy rules. The same way you can expect the colours of your carefully tweaked image to be distorted tomorrow, even if they look fine today.

Facebook is a networking platform that has exploded out of their original intent. Nowadays, for example, it is used as a powerful advertising tool. It is also used as an artwork porfolio platform. It was never designed to be used that way, though. It excels at what it should: connecting people (e.g. your grandma with your party animal friends) and even when it tries to keep up with all the new functions that users keep finding for it we can expect for the Facebook's team to take actions that support the main goal of their application (networking) but interfere with our new expectations (i.e. accurate artwork display).

Vote Up Vote Down

@BetL875

After comparing the current Facebook page image and the one on Image Shack, my guess is that jpeg compression is part of the problem. The pink is not even across the letters, indicating heavy compression artifacts in relation to the size of the image.

Facebook seems to be all jpeg, all the way, so no matter what you upload it will end up as a jpeg. It will also be crushed.

Try this:

In Photoshop, Edit > Convert to Profile > sRGB. Make the intent Perceptual and turn on Black Point Compensation. (Note that "Assign Profile" will NOT work; it will just mess up the colors.)

Save for web, and resize the image in this dialog. Try to get it to the size it will display on FB, so their software isn't messing with it. Compress as far as you can while keeping the text fairly crisp. Uncheck "Include color profile".

I have clients with AOL accounts (a red flag warning if ever there was one!), and their images get smooshed beyond all recognition regularly as AOL "optimizes" them. (cough, cough) This looks like the same problem.

Vote Up Vote Down

@Berumen635

I think that the problem is that photoshop is a color managed aplication, it will read the color profile from the operating system and use it to convert the image while you work in it.

That's obviously a good thing but when you try to see the image in a web browser that doesn't have that capability, it defaults to sRGB and there is the source of the problem.

Try setting Photoshop to work in sRGB, fix the colors and then upload the image again, it might work. It's either that or Facebook striping away some color information from the jpeg, but we can't fix that.

Vote Up Vote Down