Advanced Editing

Resizing images for the web

Written by Uncle Frank

Learn how to reduce the size of a digital image so it is more suitable for viewing online and sending via email.

One of the joys of photography is being able to share treasured images with family and friends. When I first started taking digital photographs, I emailed images but then realized many people didn’t know how to open and view a picture file. I also was loading up people’s email boxes with really big files.

My solution was to open an account at a web based picture hosting site. Now I just send folks a link to the pictures I want to share, and only make prints on request.

Large image files — a two part fix

DeerEven the web gallery approach can be a burden to friends if we upload pictures that are large in pixel dimensions. Large files not only require people scroll in order to see them but can take quite a while to download, particularly for those with slower internet connections.

The problem is, some of us are unaware of these issues, and others don’t know how to fix them. It’s actually a two part fix, involving pixel dimensions and image quality, which in digital photo terms means the amount of compression used when creating an image file.

Resize image so it doesn’t scroll

The first step in making it user-friendly would be to reduce it in size so it can be seen without scrolling. That’s easy enough to do with any image editing program.

The dimensions of the original image, taken with my three megapixel Nikon CP995, is 1832 by 1384 pixels. The file size is 1.2MB.

If you’re using some version of Photoshop, go to [image], click on [image size], and change the width to 640 pixels. That automatically changes the height to 480 pixels for the picture. It’s large enough to see the detail, but can be viewed all at once without scrolling.

Problem fixed, right?

No. Because if I save this picture and upload it to my web-gallery without changing anything else, it will be almost half a megabyte, which would still present a burden for dial-up users.

Quality and image compression

There’s an easy solution, though. When you alter an image in Photoshop and try to save it, the program first asks you to name the file, and then asks you to specify [jpeg options]. It allows you to select the “quality” of the file by moving a slider to set a number ranging between 0 (lowest quality) and 12 (highest quality). At the bottom of that screen, it actually predicts the file size that will result from the degree of compression you choose.

Nobody wants to show a poor quality picture, but guess what? Quality is used in a different sense when it comes to image files. It refers to how much the file will be “compressed”. A large quality number means little compression, and a small quality number means a lot of compression.

Below are sections of my huge picture, which was downsized to 640X480 pixels, shown at several different “quality” levels. Let’s see if you can spot a significant difference between them.

Compress level 10 (275KB)

Compress level 10 (275KB)

Compression level 6 (155KB)

Compression level 6 (155KB)

Compression level 4 (117KB)

Compression level 4 (117KB)

Now I’ve got “senior” eyes but, for purposes of sharing a picture with friends on their computer screens, I don’t see much difference at all. But do note the differences in file size.

Easy to see; quick to download

My approach is to downsize pictures to 640 pixels in the largest direction, and then to select a level of quality/compression that will result in a file in the range of 100KB. That makes them easy to see, and quick to download.

I hope you’ll consider doing the same; it’s good Netiquette. Happy shooting.

Deer photograph and text: Copyright  Uncle Frank All rights reserved

Editor note: Today many more people have large computer screens and use broadband connections than when this article was first written. However, all suggestions about compression and resizing are valid. However you may want to increase the maximum width to about 800 – 900 pixels when resizing an image.