< BACK TO ARTICLE INDEX

How to size web images correctly

Incorrect sizing or graphics is one of the most common problems on the internet. This article explains what is meant by the "size" of a web image, and how to correctly size images before placing them on web pages.

First, it's important to clear up confusion about the two possible meanings of the word "size" when it comes to web images. One meaning refers to the physical dimensions and resolution of an image. This is a little like saying that a photo is an 8 x 10. However, measuring the physical dimensions of a computer image is a bit more complicated because it has both dimensions (always expressed in pixels wide by pixels high) and resolution (pixels per inch, also referred to as dpi: dots per inch). For example:

• A 10" x 8" photo is 1800 pixels x 1440 pixels at 180 pixels/inch
• A 10" x 8" photo is 720 pixels x 576 pixels at 72 pixels/inch

The other meaning of the word "size" is the file size. The file size is measured in kilobytes (KB, or K) or megabytes (MB). A megabyte is about one thousand times the size of a kilobyte (1,024 times larger, to be exact). A typical digital camera produces images in the 5-8 MB range. Web images should ideally be in the under 100 K range. That's a big difference.

Size images correctly

There are basically two ways to size an image to fit a space on a web page. One way is to shrink the image size to fit the page using an html editor or CMS. That's the wrong way, because the file size is inevitably MUCH larger than it should be, and the image will load slowly. For example...

The photo above is 1800 pixels x 1440 pixels at 180 dpi, with a file size of 1.2 MB. It was reduced to fit this page using the image size control in the html editor. The photo below is 640 x 512 pixels at 72 dpi, and its file size in just 84 KB. They appear the same size on the page, but the one below is only 7% as large when it comes to file size.

There are three steps to correctly sizing a web image:

1. Make sure the resolution is 72 dpi.
2. Adjust the pixel dimensions (width and height) to the correct size to fit your page.
3. Optimizing the file size.

Photoshop provides an extremely handy tool that lets you take care of steps 1 and 2 all at once. First, select the cropping tool (on the left-hand toolbar below). Next, set the width, height and resolution (72 pixels/inch). Finally, just drag across the photo to the desired cropping. When you have the desired cropping, hit enter or select Image > Crop. In one simultaneous operation you have set the resolution and cropped to the correct pixel dimensions. You are then ready to optimize the file size as detailed in our article on optimizing web images.

 

 

Download this information
		Microsoft® PowerPoint® How to size web images correctly
		Adobe® Acrobat® How to size web images correctly

---