Tuesday, May 25, 2010

Best practice for web photos

Question asked on a forum recently: "How do you optimize your picture for the web?"

Well, such a broad question is great fodder for a nerd like me, so I let rip with a longish reply ...

Well, there are a few vitally important things you need to do for your web images.

1. Make sure they are resized to the exact pixel dimensions required for the destination site/blog. If you upload them too big, the server (or browser) will resize them for you, and probably not do a very good job.

Web images are always sized in pixel dimensions. Some people will tell you that they have to be 72ppi - that's baloney. They can be a million ppi if you like. All that matters is the number of pixels. For example, all Facebook images should be 720 pixels on the longest edge (either wide or high). For another example, my blog requires images to be no greater than 590px wide. You'll need to interogate your own site/blog/whatever, and find out the exact required size.

2. After resizing, sharpen them. How you sharpen them doesn't matter - you can use Unsharp Mask, High Pass, an action, etc. But make sure you're viewing the image at 100% size when you apply the sharpening, so you can properly judge the amount of sharpening you're applying.

Sharp images look lovely and striking, but be careful not to go overboard, because over-sharpened images can look yuck.

(Note: take it very easy when sharpening for Facebook.  Facebook's compression does not play nice with sharpened images.)

3. Make sure your images are in the sRGB colour space. Assuming you're using a recent version of Photoshop/Elements, the File>Save for web function has a "Convert to sRGB" option which should be left on at all times. If you upload images in Adobe RGB, or another colour space, the results might appall you.

4. Further to Point 3, make sure the sRGB profile is embedded in the file.  Check the "Embed ICC profile" checkbox at all times.

5. Put a watermark on your images. This isn't an optimisation tip, just a security one. There's no real way of stopping people downloading your images if they want to; but at least if you watermark them, they will find it much harder to show/print them as if they were their own.

6. Save as jpeg. (Best to use the Save for web function, as I mentioned). In very rare cases, gif or png might be necessary, but jpeg is the most common format. The trick with jpeg is to get the quality level right. The quality slider in the Save for web dialog goes from 0-100%, with 0% yielding a tiny file, but awful quality; 100% yields unsurpassed quality, but a big file which will slow down your page load time. I use 70% and I think it's a good compromise in most cases.

7. Lastly, and most importantly, I think ... take a chill pill. Once your images are on the web, you can't control how they will look on everybody's awful blue uncalibrated screens. You might have the loveliest skintones in your photos, but they'll look pale and purple on Joe Public's screen down the road. Don't sweat it - Joe wouldn't know a nice skintone if it bit him on the toe. He just likes looking at photos, is all.

Comments or Questions?

If you have anything to add or ask about this article, please visit me at my Ask Damien page.