Chris Hoffman’s
Outstanding Elephant

Intelligent Image Cropping

This idea was inspired by a talk given by Ethan Marcotte at a meeting of the Markup & Style Society in Boston. Ethan talked about liquid layouts, and about three ways for keeping images from overflowing their containers as the containers are resized:

1. You can crop the image, by setting overflow to “hidden”. This isn’t exactly disirable, since the right side of the image invariably gets cut off.
2. You can set overflow to “auto”. This causes scrollbars to appear on the image, which is even uglier than the image being cropped.
3. You can set max-width on the image to 100%, as in the first example. This method is near perfect, since the image is resized according to the width of its container.

I’ve come up with a fourth method, inspired by a technique for creating thumbnail images. Suppose we have an image, and we'd like to create a 50-pixel-wide thumbnail for it:

The easiest way to create a thumbnail is to resize the image so that the width is 50 pixels:

Simply scaling the image has a problem, namely, that much of the detail in the photo becomes indiscernible. A much better method involves rescaling the image slightly and then cropping it to keep the main subject of the image in view:

It’s this method of creating thumbnails that inspired a fourth technique for adapting images to liquid layouts:

4. Use image replacement techniques to replace the image with a copy of itself, positioned so that the main subject of the image remains in focus. The second example shows the technique in action.

The advantage of this technique over method #2 (setting overflow to “hidden”) is that you have complete control over where the image gets cropped. In the example, the main subject of the image is near the center, so the replacement image was centered. However, by changing the background position of the replacement image, as in Example #3, we can change what part of the image stays in view as it grows and shrinks.