Cropping
Cropping can be used to minimize page load time, show details, and improve the composition.
Page "cropping" last modified: 21Jul99
Cropping pictures, so that only part of the original image is shown, is a very powerful technique. On the web, where the size of the image, in bytes, matters (the fewer bytes, the shorter download time), wasted image space can be a problem. Also, like with paper pictures, cropping can make a "better" picture. Always think about cropping pictures!

Here are some of the uses of cropping:

To maximize use of bandwidth and minimize page load time
Cropping an image (before it is loaded onto the web) can make the size of the file that contains the image smaller. Here is an example of taking a picture and cropping it:

Full image, 14,700 bytes
(approx. 5 sec to load@28.8)
Cropped, 7,900 bytes
(approx 2.5 sec@28.8)


Here is the cropped version showing a bigger picture of each person in the same space (with about the same download time) made by removing the extraneous background and then resizing the image to about the same size as the original. The original is about 14,700 bytes, the one below, 14,300. This gives more useful information in the same amount of space:



In these cases I used the faces of each of the people as a guide for where to crop.

Cropping less from the bottom wastes more space and puts in the distracting badges, but equalizes the heights of the people:



Some people find this composition more pleasing. You should try different amounts of cropping to see what you like best. It helps if your authoring tool or picture editor lets you interactively do the cropping.

Showing detail or zooming by cropping
Most pictures start out with enough resolution to let you get the effect of a telephoto lens by just cropping the image before sizing it for display. Almost all digital cameras and picture scans have resolutions of 640x480 or above. Since most pictures on the web do fine at much less than 640x480 pixels in size (the one below is 300x225 pixels) cropping gives you the ability to zoom in on details.

This picture shows a person on stage discussing an earphone. The full picture provides context by showing more of the stage and the slides:



This cropped and resized picture gives a better view of just the demonstration of the earphone. If the caption you wanted was "The professor showed how a tiny earphone interfaced to the new computer phone", the cropped version works much better:



This photo of a baseball game was shot with digital camera with the lens zoomed in and the resolution set at 1280x960 pixels (a "megapixel" camera). The photo was reduced to 300x225 for display here:



Here is a small section, cropped and resized to get the effect of additional zoom:



Notice how I left a little extra space on the left to try to help the composition (they're all looking towards that direction, awaiting the ball).

You can mix overview with multiple details by cropping some of the pictures. Here is another shot in the same series. The full picture looks almost identical, so can be left out, but the cropped detail is different:



Extracting pictures by cropping
Sometimes you can, and should, get more than one picture out of an image. You can often produce a series of pictures by cropping.

Here is a photo. The center person has just made a joke relating to the speech of the person on the right and they're all laughing:



This could be cropped to just show the people, saving download time, and making a tighter layout:



Since the people are spread out, it could also be cropped like this into three separate pictures telling a story:
The president made a joke relating to the keynote
The speaker was quite amused
The Master of Ceremonies was very pleased


Greater impact by cropping
Cropping this image removes distracting material, and makes a better picture, no matter what size it is displayed:

Full picture
Cropped picture

On the web, wasted space stands out like a sore thumb. Respect your viewers and crop appropriately!