Preparing Photos for the Web

Part 3 - Determining dimensions of the photograph
The next step is to decide the dimensions of the photograph. That is, how wide and high it is.The dimensions for a web page are measured in pixels rather than inches. Pixel is a short for picture element. A pixel is a single dot of color on a computer screen. Every photo, line, letter, graphic displayed on computer screen is made up of pixels. The two pictures below are from the same photograph but two different dimensions. The one on the left is 100 pixels wide and the one on the right is 300. Both photos are 100 pixels high.
100 by 100 300 by 100
The dimensions determine how large the photo will appear on the computer screen and impact how long a picture takes to download. Usually, a bigger picture will take longer to down load. The amount the photo is compressed (discussed in the next section) may have an even greater impact on down load size.
Computer monitors come in a variety of screen resolutions. Typical computer monitor resolutions are 640 by 480, 800 by 600, 1024 by 768, 1152 by 864, or 1280 by 1024 pixels. A camera that takes a 3 megapixel photo will have a resolution of approximately 2000 by 1500 pixels, too large for a typical web page. Click here to view a picture of that dimensions. As you quickly noticed, the picture is probably much bigger than your monitor and took a long time to download, especially over a modem even though the photo is highly compressed. (Sometimes the browser software will automatically shrink the picture to fit in your monitor.) Clearly, the original dimensions of a photo from the camera or scanner are not normally appropriate for a web page. Besides being cropped, the photos must be shrunk.
The solution is to change the dimensions of the picture before you add it to your web page. Fortunately, it is very easy to adjust the dimensions of a picture using readily available software. In the software look for terms like “Resize Image” or "Picture Size" or "Dimentions." When you are working with photographs, you will often create two different sizes, usually a thumbnail and a larger photo. Below are some guidelines for each size.
  • Thumbnails will typically be between 75 to 125 pixels wide. The picture below is 100 pixels wide

100 by 75 Pixels
  • Typical size for a photograph in an album would be 450 to 750 pixels wide.

450 by 338 pixels
As you resize you pictures, you will usually select either the width or the height, not both. Then indicate the option to maintain the aspect ratio. By maintaining the aspect ratio or proportions, the picture will not become distorted as it is resized. You will find the resize options under the format options of your software. Sometimes you can specify the pixels. Sometimes you must work in inches.
It is a good idea to pick a common dimension. Make your thumbnails all the same size in either width or height, like 100 pixels wide. Make your product pictures the same width and height, such as 250 by 300 pixels. Photo album pictures you might want to make them 600 pixels wide. Experiment with several sizes and then settle on just a few.
Part 4 - Optimize Photograph File Sizes