While the web isn’t a new concept, I find that there are still quite a few sites that don’t handle images very well. There are several problems that you need to be aware of.

First Some Background

When dealing with images for the web they are defined by their width and height in pixels. A pixel is a single point of color in an image. Line up pixels side-by-side and you get the width of an image. Top-to-bottom and you get the height of an image. Each digital camera has it’s own resolution (width and height in pixels) based on the image sensor in the camera. My current camera, the Canon 5D, produces images that are 4368 pixels wide x 2912 pixels tall (or when multiplied together 12.7 Million pixels).

With images for the web all we need to know is the width and height of the image and what width and height we want it to show on our web page.

Remodeled Kitchen - 400 pixels wide x 267 pixels high

DPI, or dots per inch, is another aspect of images that is often mentioned. However, it is only relevant when you print an image. DPI refers to how many pixels, or dots, get printed in one inch of paper. DPI is usually around 300 for most printers. To keep things simple a Canon 5D image printed at 300 DPI would print at 14.56″ wide (4368 pixels / 300 DPI) x 9.71″ tall (2912 pixels / 300 DPI).

That is a pretty large print, and is way too large for the web. The image above is ten times smaller than what came out of the camera. That is a lot of image data that is now gone. Making sure the image looks good after that much data loss, and that it is displayed properly will be discussed next.

Processing Images For The Web (Part 2) - The IMG Is Everything
Processing Images For The Web (Part 3) - Proper Resizing
Processing Images For The Web (Part 4) - Sharpening (not just for knives)

Digital Photography photoshop, sharpening, web