Optimizing Color Photos For Web Usage
I’ll try not to make this extremely detailed and will gear this toward those who have some knowledge in Photoshop and resizing photos. The main idea here is to show the difference between RGB color profiles compared to sRGB color profiles when displayed on a website and how to get your color to display better.
When I deliver photos to clients I give high resolution master files set in a large color gamut such as RGB. The good thing about this is that the images can be converted for almost any purpose. The problem is giving people more control over something they may not understand. Yes you can size the photos down so they load quickly and look sharp on a website, but what about the color?
The RGB color space is great for photographic prints but not good for web purposes. Why? Because web color space is limited to a smaller range of colors than RGB. If you use RGB photos on a website, the monitor will display a bit flat with less saturation. Some colors are affected more than others such as blue. This can be technically explained but to make this short the colors are rounded off to a small range that usually isn’t the best result. So what can you do? You need to convert the Adobe RGB color profile to sRGB and optimize the colors so you don’t lose that wonderful snap you’re used to seeing on photographic prints. Keep in mind that results won’t always be 100% but you can get very good results that will surprise you once a comparison is made.
First be sure to have your photos sized to the desired dimensions based on how they will be displayed on the internet such as a website. Specs will differ based on where the photos will be displayed but most need to be set at a specific size at 72 dpi. I’ll try to cover resizing in another post.
Now for the interesting part. Once the image is set to the desired size I usually add a little extra saturation because some color is lost during converting. Experiment with this. Below is a screen shot of the “Save For Web & Devices” feature in Photoshop CS4. It can be found under “File” where you select “Save” or “Save As”. See the two images side to side? Notice the colors in the sky and the rooftop? The original RGB image is on the left and looks terrible in comparison to the optimized sRGB image on the right. The save for web feature condenses the color information so it looks much better on the monitor. Blue skys are often a casualty but you can see the optimized image is rather nice. Results may vary and sometimes you won’t get it perfect but it’s sure better than no optimizing at all.
Save For Web
Something to point out about what you’re seeing with “Save For Web & Devices”. I have the preview set for showing what the image is like on a monitor viewing a website. You can look at the original RGB all you want as displayed in Photoshop and yes you see it on your monitor but once its on a website it gets affected.
You will see lots of features such as JPEG options and tabs that show different comparison options. You can play around to see what you prefer and of course more options are here but research and do tests. Be sure you have the “Convert To sRGB” box checked for the conversion.
Just like anything else you do, backup before trying things out.
[...] Optimising colour photos for web usage [...]