If you’re a designer, photographer, artist or just a photo enthusiast like me, you’re probably uploading your images all over the Internet. From Facebook to Flickr to blogs… everywhere!
On the Internet, your images are being viewed on a multitude of devices – iPhones, Samsung Galaxy series, iPads, Tabs, Notebooks, those crappy office monitors and even on the Mac retina displays. Now each device and browser has their own way of managing colors. So, inherently the same image will be rendered differently on different monitors.
While we cannot account for the hardware differences, the best that we can do is to ensure that at least the interpretation of colors in our image remains uniform across devices. For eg, a bright yellow should show as bright yellow on all devices and not as a pale, faded piece of sh*t.
Very often we come across situations where our image looks great in Ps or Lr while we’re editing them, but looks washed out upon uploading to the Internet. Sometimes, the images may look great on the laptop but may appear a bit faded on mobile screens and tablets. At first I didn’t notice these differences, or probably just ignored them subconsciously, but once you notice them, they can quickly get on your nerves.
For example, have a look at the images below. This is the same image (exactly the same file) which shows up differently on my desktop and my phone browser.
So, how to fix this?
Well, that brings us to the topic of the day – Color Modes, Color Spaces and management.
The most popular color modes are RGB and CMYK in addition to Grayscale and others. RGB stands for Red, Green and Blue; while CMYK stands for Cyan, Magenta, Yellow and Key. Without going too much into the technical aspects, here’s a rule of thumb that you should always remember.
For displaying on the Web, always use RGB and for anything that’s gonna be printed, use CMYK.
Simple! Isn’t it? If you’re using Ps, you can just go to image>>Mode and change the mode to RGB color if that’s not already selected.
Color Spaces and Color Profiles:
A Color Space is basically a predefined set of visible colors. You can think of the Color Space like a box of crayons. In the images below, both the crayon sets (color spaces) have 16 crayons, but the first set has a much wider color range as compared to the second set.
The commonly used color spaces are Adobe RGB (1998), sRGB and ProPhoto RGB. If you’re using Ps, go to Edit>>Convert Profile. In the dialog that opens, take a look at “Source Profile”. This will tell you the color space you are currently working on.
A Color Profile is usually tagged with the image which tells the software & hardware what color space the image is in. This helps the hardware & software to correctly interpret an image and display it.
For eg, an image created in Adobe RGB (1998) space will have an Adobe RGB (1998) color profile embedded in it. Browsers will read the profile information and translate the color information stored in the image to display the image correctly.
So far so Good.. What is the problem then?
The problem lies in the fact that not ALL browsers are color-managed, i.e , not all browsers understand color profiles. Almost all mobile browsers are incapable of understanding color profiles. With color-managed browsers, we actually do not have a problem. They will simply read the color profile and display the images correctly. However, expecting an unmanaged browser (which cannot read color profiles) to interpret every image correctly is much like expecting a buffalo to learn GPS navigation.
So, while you’ve spent hours editing an image on your laptop and your masterpiece renders perfectly on your laptop browser, your phone viewers may still be seeing a distorted version of the image on their phones.
Below are images created in Adobe RGB and ProPhoto RGB color spaces. Have a look at how an unmanaged browser interprets these images.
Well, not exactly!! In all browsers which are not color-managed, the browser assumes that the image has been created in sRGB color space. It will ignore any tagged color profile and try to interpret every image as an sRGB image.
Does this mean anything? (Fingers, Hands and Legs.. All crossed)
Of course, it does! It means that every image created in the sRGB space will be interpreted correctly by unmanaged browsers too. Yeyy !
So if you’re creating images to be displayed on the web, where majority of the browsers (mostly in mobile space) are unmanaged browsers, your safest bet is to always create images in sRGB color space.
In Ps, once you open a file for editing, you can go to Edit >> Assign Profile and then select sRGB IEC61966-2.1 from the Profile drop down menu. This will tag the image with sRGB profile and you can start editing your image.
If you’ve already edited images before which are not in sRGB, you can go to Edit >> Convert to Profile and then select sRGB IEC61966-2.1 in the destination space drop down menu. This will assign the sRGB profile to the image and change the image’s color value so as to keep the image appearance as consistent as possible in the newly assigned color space.
* If you want to see how your non sRGB image will be rendered in an unmanaged browser, follow the instructions for Ps below.
- Open an image which is not in sRGB
- Go to View >> Proof Setup and select Internet Standard sRGB
- Press CTRL + Y to toggle between managed and unmanaged versions of your image.
How to find out if my browser is color-managed?
Well here’s a simple test. Just look at the images below. The first image has been created in sRGB color space with sRGB color profile embedded in the image. All color-managed browsers will read the color profile and display the image correctly on the screen. All unmanaged browsers will ignore the color profile, but default to sRGB. Since the color space is sRGB, they too will display the image correctly. Hence we will use the image on the left as the reference image.
The second image has a non-standard color profile. All color-managed browsers will be able to read the profile information and display the colors correctly. Unmanaged browsers will however default to sRGB and display the image as an sRGB image.
If both the images appear same to you, your browser is definitely color-managed. However, if the second image appears to have a bluish hue, it means your browser does not support color-management.
Got it ! What’s next ?
So, we’ve learnt about color modes and we also know what color space to work with. Next we’ll learn How to save an image.
LOL ! I can do that a zillion times with both my eyes closed and my head buried under my pillow.
I’m sure you can… But what we are going to discuss here is not just about saving an image. It’s about saving an image optimized for the web.
I’ve come across many blogs; some of them belong to my close friends, where there are images that are more than 1 MB in size. I mean C’mon! Do you really think people have the time and inclination to see your images load like the curtains rising for some Shakespearean play?
Here are few simple things that you can do…
Resize the image to the proportion needed for the web. For eg, if you need a 1500 pixels wide image for your blog, there’s no point taking a 4000 pixels wide image for that. In Ps, go to Image >> Image Size, and enter the new dimensions (width, height) to reduce the size of the image.
Once you have resized the image as required, you need to save the file using the “Save for Web” option. In Ps CC 2015 you can go to File >> Export >> Save for Web (Legacy) option or File >> Save for Web in older versions of Ps. Once you’re there, select your file format. I prefer JPEG for my images. Also select the Compression Quality. I usually go for either “Low” or “Medium”. This helps to compress my images well without any visible loss in quality.
You will also see other check boxes like “Progressive”, “Optimized” and “Embed Color Profile”. I usually check the “Progressive” option while keeping the other two unchecked, but then it’s totally up to you. Progressive images are images that do not load from top to bottom, but will “fade in” in successive waves of lines until the entire image has been completely loaded. Users with faster connections are not likely to notice the difference at all.
Once you’re done, click on Save
A word from the author:
Guys, Thank you so much for reading this post. I have tried my best to explain the concepts in the easiest way possible. I guess some of you are already aware of these concepts, but this post is meant for those who are still not aware of how they should be saving their images for the Web.
I hope this post turns out to be helpful for them. If you have any questions related to the post, please feel free to ask in comments below. Thank you so much