Image Resizing

image resizing

After you have scanned a photograph or taken a digital picture to put on your web page, the file will probably be in a jpeg format, or it may need to be converted into jpeg from a non-compressed format (.tif or RAW). There are many programs for Windows or Macintosh computers that will do a conversion for you. By converting your image to a compressed format (such as .jpg or .png) 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 still take up a lot of screen real estate. The file will be slower to come into view in a web browser. You will want to scale down, or resize, the image to a smaller size. Let’s show the concept of scale to you visually.

Below is an image that is 640×480 pixels.


If I wanted to display the original image, it would take longer to load, and might be more difficult to see (on this page it just opens an overlay window). By showing you a scaled-down version, we would be doing you a favor if you use a dial-up connection to the Internet. By displaying “thumbnails” of images instead of the full-size images, you can decide which images you want to see the details of. If you want to see the large (VERY large) version of the image, click on the “thumbnail” below.

itcc thumb

Images in digital format are measured in pixels (short for picture element). A pixel is a single square that contains a single color in a digital image. Let’s view another image that started out as 640×480 pixels.


The image below is a very small part of the Jepson Science building (on the campus of UMW).


9×9 pixel image

The next image is a 16x magnified version of the tiny one. In the center of the image is a light green square surrounded by a dotted line. That represents one pixel. The actual size of the tiny image above is 9 pixels wide by 9 pixels high or 9×9. 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.

9×9 image magnified (16x)

Again, the dimensions of the original image of the Jepson building is 640 pixels wide by 480 pixels high, and was taken back when the “large” size that the camera produced was 640×480 (can you say Sony Mavica?). The size (space that it takes on a hard drive) of the original is 35,092 bytes (or 35k). Now let’s look at some smaller, resized versions of the same image.

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

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

Note two things about the images above. First, notice how the resizing effects file size. The first image (400×300) decreased almost 50% in its file size, while the second (200×150) decreased by over 80% compared to the original. 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 wide


So How Do You Resize an Image?

In the image manipulation programs we have talked about, such as 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. See the article The “Simple” Act of Resizing Images.

Cropping – Another Way To Resize

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 objects that you don’t want. Enter the technique of cropping. Let’s look at our Jepson building one more time. The first photo is the original photo (I’ve already resized it down from 640×480 to 300×225). We want to focus on the building and not the 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 second image, scaled down by cropping, and the file size is smaller as well.

Original photo 300x225 (10,695 bytes)

Original photo 300×225 (10,695 bytes)

Cropped photo 201x132 (4,736 bytes)

Cropped photo 201×132 (4,736 bytes)

Leave a Reply

Your email address will not be published. Required fields are marked *