Skip to main content.

Image Resizing

by Andy Rush

After you have scanned a photograph or taken a digital picture to put on your web page, you usually convert it to a gif or a jpeg format image. Programs such as Irfanview (for a PC) or Graphic Converter (for Macs) will do that for you. By converting your image to these formats you will significantly reduce the file size of your image. However, if you have an image who's dimensions are still quite large, the image will take up a lot of screen real estate. The file will also take a long time to come into view in a web browser. You want to scale down , or resize the image to a smaller size. Let's show the concept of scale to you visually.

The original image is a 640x480 pixel digital image. If you are viewing this page on a computer that has dial-up Internet access, it may take a while to load. By not displaying the original image in this page, I am doing you a favor. It might take close to 30 seconds (for a 14,400 bps modem) to display it. If you really must see it, click on the "thumbnail" below.

Click to see original image of Jepson

Images in digital format are measured in pixels . A pixel is a single square that contains a single color in a digital image. The image below left is a very small part of the Jepson building. The image below right is the image magnified 16 times. In the center is a light green square surrounded by a dotted line. That represents one pixel . The actual size image is 9 pixels wide by 9 pixels high or 9x9. Count the pixels (squares) in the magnified version if you like. In case your curious, the image below is a small portion of the green flag hanging from the Jepson building. If you look closely, you can make out the "Je" in Jepson on the flag. Look at the original image to check.

pixel small

pixel
actual size
9x9 image 		16x magnification
of 9x9 image

If you take for example our original image of the Jepson building, its dimensions are 640x480 (again, 640 pixels wide by 480 pixels high). The size of that file is 35,092 bytes (or 35k). Now let's look at some smaller, resized versions of the same image.

Jepson 400x300 This image has been scaled to 400 pixels in width. Its dimensions are 400x300. The file size is now 18,376 bytes (18k).

Jepson 200x150

 This image has been scaled to 200x150. The file size is 6,284 bytes (6k).

Jepson 64x48

 Remember the thumbnail from above? It's 64x48, and 1,419 bytes.

 

Note two things about the images above. First, notice how the resizing effects file size.The first image (400x300) decreased almost 50% in its file size, while the second (200x150) decreased by over 80% compared to the original. The thumbnail shows a decrease of 96%. The second thing you should notice is that all of the scaling was done proportionally, which means that the image retains the same ratio of width to height. If it didn't, the images might look like:

This . . . Jepson skinny. . . or this . . . Jepson fat

 

So How Do You Resize an Image?

Using some of the image manipulation programs we have talked about, Irfanview, Graphic Converter, or Photoshop, there is usually some option to resize the image you are currently working on. Commonly it is under an image or edit menu. Look under the program's help menu if you don't find it right away. Each program will accomplish resizing a little differently, but you usually are allowed to type in the dimensions you wish to change the image to. Also, there is almost always a box that you can check to constrain proportions or keep the aspect ratio , which means that you keep the image from looking too skinny or too fat compared to the original.

Cropping - Another Way To Scale

There may be times when the image that you have has got unwanted stuff in it. Maybe it's a picture with several people and you want to focus in on one person. Or, maybe you have a photo that you didn't quite frame right and you've got some extraneous object that you don't want. Enter the technique of cropping . Let's look at our Jepson building one more time. On the left is the original photo (I've already resized it down from 640x480 to 300x225). We want to focus on the building and not the uninteresting foreground. We first select the area with the selection tool in our photo editing program, then select Crop (usually from the image menu ). What we get is the image on the right, scaled down by cropping, and the file size is smaller as well.

Jepson Building Jepson Building cropped

Original photo 300x225
(10,695 bytes)

Cropped photo 201x132
(4,736 bytes)