Q&A: Why do I look like a boiled lobster on this blog?

Q A recent photo of me on a blog looks fine when browsed using Safari, but Firefox and Google Chrome misrender it, making me look like a boiled lobster. How can I correct that?

A You are right in noticing that Safari seems to be the only popular browser which renders your photo correctly; Firefox, Chrome, and Opera all render the image far too red, reflecting the fact that they are using a different rendering engine.

Such disparities are likely to increase now that there is divergence in the source code for rendering in different browsers: I have written here about the background to this.

Your particular case may result from the majority of browsers ignoring the colour profile attached to the image file, as the downloaded image renders correctly in Preview and other local apps.

You should be able to tweak the photo, merging the colour profile into the image itself, using an editor so that it works more consistently; if not, the only way to work around this is to put conditional code in the page, so that each browser is fed a version of the image which it can render correctly.

That is tedious at best, and may be even trickier to incorporate in a blog page which is probably maintained using an accessible client app.

Comments When saving an image to be viewed in a Web page, use the Save For Web or similar command, as available. If you are saving from an app which is more general in purpose and does not support such features, open the image using an image editor such as Adobe Photoshop, GraphicConverter, etc.

When saving images for view on web pages, merge the colour profile into the image to avoid rendering issues.
When saving images for view on web pages, merge the colour profile into the image to avoid rendering issues.

Convert it to an sRGB colourspace if necessary, avoiding CMYK which is for printing not screen rendering, and merge the colour profile into the image for compatibility. Test each image out by opening it as a file in popular browsers such as Safari, Firefox, and Chrome.

Although that might be overkill for a simple landscape photo, for important images, such as mugshots, where subtle effects could be embarrassing, it is well worthwhile: no more boiled lobsters, then.

Updated from the original, which was first published in MacUser volume 30 issue 09, 2014.