Many people have problems with the color of their photos when they publish them online. There are several reasons why this might be so, but the most common culprits are the color space of the image and whether or not the profile is embedded. Both color settings can radically affect web browser color and how your photos look.
Let’s look at some of the potential pitfalls more closely.
The Importance of Embedding the Color Profile
Whenever you edit your photos in an editing program like Photoshop, you are doing so using a specific RGB working color space. To be sure of preserving the color you see when you’re editing, you need to embed the profile before saving the image.
In simple terms, the ICC profile is a translator. It enables different apps and devices to interpret the color as you intended. If you get into the habit of embedding profiles into your images as you save them, you’ll reduce the chances of color looking wrong on the web or in print.
The rich color in this ProPhoto RGB image will look okay in many browsers despite not being sRGB as normally advised. If it looks muted and drained of saturation to you, it’ll be because you are viewing it in a non-color-managed browser. By embedding the profile, I’ve given it the best chance of looking as intended to the majority of people. On a wide-gamut monitor, the colors will pop a bit more.
Embedding the profile into an image adds about 3-4 kB to the file size, so the only time it makes sense to exclude it is when you’re uploading vast quantities of photos to the Internet.
If you must leave the profile out, making sure that the image is in the sRGB color space will limit any resulting damage. Two or three of the more popular browsers will still display the color faithfully because they automatically guess the profile correctly (i.e. sRGB).
Although most browsers have improved in their handling of color recently, it’s still good practice to embed the profile. Don’t leave it out without good reason.
Because the profile has been left out of this same ProPhoto RGB image, the brightness and color will look terrible in most browsers and on most monitors. By contrast, a missing profile for an sRGB file would be undetectable to a large number of people.
How to Embed the Profile
Embedding the profile into images is usually just a case of checking a box when you export the photo. If such an option doesn’t exist, the default will either be the predefined working space of the program, or it’ll be sRGB for web-specific output.
If you want to check the color of your web images before publishing, open them directly in a browser (preferably a reliable one like Chrome) and see how they compare to the original in your photo-editing program. Be a little wary of uploading images to platforms that strip out the profile, though these will not typically be photo gallery sites.
Embedding or stripping out profiles usually only requires you to check or uncheck a box when saving. This is the “save as” pane in Photoshop.
Converting to Profile
You can use “convert to profile” in Photoshop to create an sRGB image, which is the safest color space choice for the web. Be sure not to overwrite the original file and save it this way, because larger color spaces are a better choice for outputs such as inkjet printing.
Do not use “assign profile” for profile conversion, as it causes a color shift and is not meant for this purpose.
Using “assign profile” in Photoshop to convert between profiles will cause a color shift. Color in the right-hand image above has gone flat as a result of assigning an sRGB profile to an Adobe RGB image. You must use “convert to profile” if you want to create an sRGB version of your photo for the web.
Why Monitor Gamut Matters
Color management needs at least two profiles to work (image profile and monitor profile in this case). If you publish images without profiles embedded, you’re relying on the viewer’s browser to guess the color space correctly.
When color management is absent from the browser or app for whatever reason, the following statements are true:
- An Adobe RGB image looks roughly correct on a wide-gamut display.
- An Adobe RGB image looks muted in color on a standard-gamut display.
- sRGB images look roughly correct on a standard-gamut display.
- An sRGB image looks oversaturated in color on a wide-gamut display.
Note that an Adobe RGB image without a profile embedded looks muted in most situations and must be avoided. Browsers will guess the color space to be sRGB if they guess at all.
The graph above shows the difference between a standard-gamut Dell monitor (colored outline) and the sRGB profile (dotted outline). Even on a regular desktop monitor, some colors are quite likely to exceed the sRGB color space and look too saturated when viewed in Microsoft browsers.
In the monitor above, it’s reds that are most exaggerated in that situation. If you haven’t profiled your monitor or if the gamut of the screen is contained by sRGB, you won’t encounter this.
Browser Behavior 2018
To understand color profiles, it helps to know how different browsers behave with color. I tested five browsers for this article to give you an idea of what to expect. Feel free to query this if you think any of these observations are wrong:
Google Chrome
Chrome is a fully color-managed browser that assigns sRGB to any “untagged” images (i.e. those without profiles embedded). It reads all embedded profiles.
Opera
Opera is a color-managed browser that automatically assumes photos to be sRGB if the profile is missing. Like Chrome, it reads all profiles, including Adobe RGB or ProPhoto RGB.
Firefox Quantum
You can configure Firefox to assign sRGB to any untagged photo. It reads all embedded color profiles.
If you happen to run two monitors, Firefox does not maintain full color management across both of them. For optimum color, you must dial in one monitor profile then stick with that monitor. This only applies if your monitors have custom profiles.
Microsoft Edge/Internet Explorer
Microsoft Edge has a half-baked solution to color management. It reads different color profiles and converts everything to sRGB for display. The main problem is that it doesn’t use the monitor profile. Thus, it works best if your monitor does not exceed sRGB in gamut. Otherwise, you’ll see wayward colors.
Safari (for Windows)
Safari can read profiles in images and uses the monitor profile (unlike MS Edge or MS IE), but it does not assign a profile to an image if one is missing. In that situation, it displays color wrongly as Microsoft Edge does.
In Photoshop, you can use “Monitor RGB” proof colors to show you what the photo will look like in Internet Explorer on your own monitor. You’ll need to convert the image to sRGB first. If colors look brighter than they do without proofing, it means your monitor’s native gamut exceeds the sRGB profile.
A second experiment is to view the proof colors of an Adobe RGB or ProPhoto RGB image using “Internet Standard RGB”. This will show you how photos in bigger color spaces look on the internet if you omit the profile.
Choosing sRGB for the Web
The reason why sRGB is a safer choice of color space for the web is that most displays or monitors are not wide-gamut. Thus, if the profile goes astray or is stripped out, or if a device or app doesn’t support color management, the color will still look okay. This is what Microsoft’s browsers rely on to work.
If you want the color of your photos to look “okay” to the widest possible audience you need only do two things:
- Make sure the image is in an sRGB color space either by using it as your working space or by converting to sRGB before uploading to the web.
- Embed the sRGB profile into the image before saving.
Photoshop’s “Save for Web” lets you convert to sRGB at the very last moment by checking a box. If you leave the box unchecked, the photo is saved in whatever color space you edited it in. You can’t strip the profile out with this checkbox: it’s purely for conversion.
Other Choices: Adobe RGB and ProPhoto RGB
Since most popular browsers are now color savvy, the possibility of using other color spaces on the web exists. You could, for instance, publish photos with an Adobe RGB or ProPhoto RGB profile embedded, and they’d still look good to most people. To a minority, they’d look better.
The color of wide-gamut monitors typically exceeds Adobe RGB in places. Hence, there is theoretically a reason for publishing photos in ProPhoto RGB. However, this is offset by the dire color that results when the profiles are missing or ignored. It’s high risk.
Adobe RGB is an interesting prospect for the web because it still benefits users of wide-gamut monitors. Importantly, it doesn’t look as bad as ProPhoto RGB when things go wrong. However, if you publish in Adobe RGB, you’ll still be doing so for a relatively small audience.
If you do use these wider-gamut color spaces for the web, you absolutely must embed the profile. As soon as that goes astray, the color in your photos will look a bit flat to many people. In the case of ProPhoto RGB, it’s likely to look awful.
This 3D diagram (above) shows the sRGB profile encompassed by the profile of a wide-gamut monitor. In particular, you’ll note the extended range of cyans and greens in the latter.
The idea of using larger color spaces on the web is appealing, especially if you’re a landscape photographer for whom these colors are often truncated. It means you’d be making more use of your camera’s capabilities. However, it’s inherently riskier and you’ll be playing to a relatively small audience. The safe choice is still sRGB.
In Summary
Although modern browsers are more flexible, sRGB is still the safest choice of color space for the web. Again, this is because it roughly matches the gamut of most electronic displays. Using bigger color spaces risks draining your photos of color, especially on tablets or smartphones that may not be color-managed.
I hope this has been of some use. Feel free to ask questions if you need any clarification.
