There are plenty of good personal photography sites out there, and odds are that if you shoot a decent amount, you’ll want to start a Web site to show off your work as well. But so many personal photography Web sites are ruined by a few mistakes and missteps when editing photos for the Web.

Photographers learn to value quality in a photograph above all else, and that’s why working on the Web can be a frustrating experience: you have to make compromises. In general, resized images for the Web:

• Are less sharp
• Introduce compression artifacts that reduce image quality

Pros will debate very specific editing techniques to prepare photos for the Web, but I wanted to give a guide for beginners.  Here are some basic steps you should be following to make sure your images display correctly online.

Choose the right file type.

This goes without saying, but you’d be surprised how often photographers still make this mistake. In 99/100 cases, you should be saving your photographs as JPG files for the Web. JPG is a file type that’s optimized for displaying photography online, and it offers enough compression without compromising image quality.

Chose the right file dimensions.

Full-resolution photographs never cut it on the Web. You’re going to want to downsize considerably. Consider this - the average width of a Web site today is right around 800-900 pixels. Today’s digital cameras are capable of taking images several thousands of pixels wide. You’re going to need to edit - and downsize - your photographs for the Web.

A good rule of thumb is this: try and keep the longest end of your photograph around 500-600 pixels for a LARGE image, think more in the 300-400 pixel range for a medium-sized image. This should help keep your file sizes low and keep your users happy. If you want to offer a full-sized image, great! Just make it as a link from a smaller thumbnail. Your users will thank you.

Examples of some common Web file sizes:

Choose the right compression.

Just as you needed to downsize your images for the Web, you’re also going to need to reduce the quality too. A small - but consequential - percentage of Internet users still don’t have high-speed access, and you’ll lose out on their page views if your images take too long to download.

When you reduce the quality of a JPG image, you introduce something called file artifacts. These look vaguely like digital noise, but they’re not produced by anything in your camera. They’re results of the compression algorithm discarding visual information in your image in order to reduce the file size. Optimizing images for the Web is a challenge between getting the file size as small as possible while keeping the image quality high. Generally, you want a photograph to be around 50-60 kilobytes for the Web….much larger and your pages will take too long to load. Too much compression, though, and your images will end up looking like this tortured flower.

Resize your images - don’t let the browser do it for you.

Part of the <IMG> tag in HTML lets you define an image’s size when inserting in on a Web page.  For example, I can define an image that’s 1200×800 pixels as 300×200 pixels by entering the following HTML code:

<img src=”my1200×800image.jpg” width=”300px” height=”200px”>

But the results will be far from perfect.  Here’s what the result looks like, versus an image that was resized down in Photoshop and inserted at its correct dimensions:

The browser-resized image takes too long to load, and looks bizarrely oversharpened.

The image resized in Photoshop looks a little softer, but it’s much more pleasing and takes much less time to download.

Handle your resizing in your favorite image editor; please don’t leave it to the browser.

Sharpen after you resize

Softness is a side effect of most algorithms image editing software use to resize photographs. So don’t be afraid to sharpen your image a little bit after you resize - even if you’ve done it previously in the editing process. A little sharpening makes our city image that much more pleasing for the Web.  Just be careful - a little goes a long ways.

Like what you see? Join our newsletter.