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 and uses a PANTONE color. I think this could be the problem because the distortion affects only this color alone.
I have tried saving it for normally, for web, in multiple formats (JPG, PNG, GIF) Always the same exact result: color distortion.
So, how can I upload this image without having to change the color?
EDIT: Here’s a link to the image because I don’t have enough rep to publish any image yet:
OK, it seems that the problem is Facebook, which is the place I’m trying to upload this trademark, because I uploaded this to ImageShack and it shows correctly.
Any advice on how to fix it?
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.
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.
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).