How big should the pictures be?
The speed of the web and the small size of most computer screens biases designs to smaller pictures.

Page "howbig" last modified: 21Jul99

I believe that small to medium sized pictures, such as those used on most of the examples on this web site, are most appropriate today for web photo journals and albums. This is especially true with photo journals that tell a story, where you want to juxtapose pictures and the screen is small.

Most viewer's computer screens are somewhat small in terms of resolution. The original VGA resolution of 640 pixels (dots) by 480 is still pretty common. Many newer machines are running at the 800x600 resolution that is popular with many educational and game CD-ROM titles. 800x600 is also common with laptops, except at the very high end. Other than programmers and graphics professionals, most people do not (or cannot) run their PCs with greater than 1024x768 resolution.

Given the size of the window available when using a browser, therefore, you can't present a picture and a caption that is much bigger than 500 or so wide and 350 or so high and expect it to look like a photo. If you want to give the viewer some continuity from picture to picture on a page, you may want to be even smaller. I typically use images about 300 pixels wide or less.

Another problem is that large pictures take much longer to come down the communications line from the web server to your PC, especially on dial-up lines.

Smaller pictures, though, can be quite satisfying. A spread of four small pictures, appropriately cropped, can convey much more information than one large one.

For example compare the large image below to the smaller ones that follow. They all come from the Time Capsule Sealing ceremony from MIT's Laboratory for Computer Science 35th anniversary celebration photo album (see Samples), and have captions:

Dan puts a copy of an early VisiCalc specification into the Time Capsule

(Single large image)

	Dan puts a copy of an early VisiCalc specification into the Time Capsule
	Bill comes up to put in his early Basic papertape
	The Time Capsule is sealed shut
	A plaque on the front of the base lists the contents
(Four smaller images)

The full-size picture is 89,683 bytes (about 30 seconds to load @28.8). The smaller four total about 58,000 bytes (about 20 seconds @28.8), which is much less, yet they tell more of a story and fit better on the screen. The full-size image is 640x480. The smaller images are cropped and resized to 150x193, 230x192, 261x191, and 300x217, respectively.

Not all "sizing" is the same!

Make sure that the picture files you place on the web really are the size you think. Some web site creation tools upload the full-sized image to the web site (89K in the example above) and then instruct the browser to display it as if it was smaller on the screen. (The HTML that defines a web page can tell the viewer's browser to resize the image after the image file comes down from the web site server.) This makes the image appear small on the page, but does not save download time. More and more tools today, like Trellix Web, do the resizing in advance, before the image is uploaded to the web site server. You may want to check what the tool you use does. If your tool uploads the full size, you may want to use a picture editor on your PC to pre-size the image before uploading.

Sometimes you want as detailed as possible

There are times, of course, when you want a picture that has as much detail as possible. This includes pictures you expect people to print out and use for their esthetic qualities, pictures of groups where you want to have recognizable pictures of as many people as possible, etc.

You can have it both ways, thanks to linking

Don't forget, you can always provide a full-sized, uncropped copy of a picture just by linking to another page with the full image. You can link either from the picture or a phrase like "Click here for full image". Unlike paper photographs, copies, at all sizes, are virtually free and very easy on the web.

You can also mix cropped full-resolution with reduced-size full images, like the baseball examples on the "Cropping" page.

Don't make them too small

Too often people use thumbnails as placeholders for a full-sized image, never expecting them to stand on their own. The smaller image, often made "larger" by cropping off extraneous parts, can convey the information that you want without forcing the viewer to wait for a large download or going to another page away from your text.

Here's an example. This is a picture of the truck that goes before the lead runners at the Boston Marathon. The tiny thumbnail is linked to a page with the full sized 640x480 image:

Click to see full-size

Here is a slightly larger (13,700 vs. 7,500 bytes) cropped image, but at the same resolution as the full image:

If you were telling a story about the press truck and describing the clock, there is no need to have the full-sized image.