Best practice for web photos

There are a few vitally important things you need to do for your web images.

1. Size

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 a persistent myth, with no basis in truth. 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, 960 or 2048 pixels on the longest edge (either wide or high). For another example, my old blog required images to be no greater than 590px wide. You’ll need to interrogate your own site/blog/whatever, and find out the exact required size.

2. Sharpening

After resizing, sharpen them. 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 aggressively sharpened images.)

3. sRGB

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. Include the profile

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

5. Watermark

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. Jpeg

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. Relax

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.

 


If you have a question about this article, please feel free to post it in Ask Damien.