Cropping and resizing your images for the Web is a common technique for creating smaller thumbnail images that download quickly. However, we've seen many sites that either use HTML's Figure 1: Andy King at Alaska Border (uncropped) What is cropping contextually? Many times digital images shot for Web use have a border of useless space around the object(s) of interest. Rather than crop to just the film or chip's border, crop contextually down to the minimum dimensions that still convey the meaning or context of your image (see Figure 2). Figure 2: Andy King at Alaska Border (cropped) Note how the author is now more recognizable in the cropped version (behind the sunscreen) and the lettering is larger and more legible. Most importantly, the image has more impact, with the subject taking up more of the frame. This cropped image could be shown with a smaller dimension, saving file size.Resize to a Smaller Thumbnail
Once you've got your image maximally cropped, resize and sharpen it to create a smaller thumbnail image. To give the reader more detail, you can provide a larger version (cropped or uncropped) of the image linked to that thumbnail. This two-step process of cropping maximally and resizing is what Jakob Nielsen calls "relevance-enhanced image reduction." Nielsen writes that by combining cropping and scaling you can "preserve both content and detail, even at very small sizes." (Nielsen 2000)
Some high fashion sites actually use only the important part of an image as a thumbnail. For example, just the shoulder or neckline of a style - click and you get the full shots with details. This "image tease" technique can add an artistic feel to a site. Let's get up close and personal with our intrepid traveler in Figure 3. Figure 3: Closeup of Andy King at Alaska Border (cropped from larger image) In extreme cases you could rearrange the target objects and reshoot, or move them closer together in your favorite image editing program. The idea is to use the smallest possible image that still conveys the information you want to display. You may need to bump up font sizes to withstand more extreme image reductions. Be careful when resaving JPEG images. Reoptimizing an existing JPEG can compound compression artifacts. It is possible to transform JPEGs losslessly, however. Lossless transformations (like 90-degree rotations and flips) require the dimensions of the JPEG to be a multiple of the block size (16x16, 16x8, or 8x8 pixels for color JPEGs). Lossless crops are also possible by cropping to block boundaries with specialized software, like JPEG Wizard. Andy King is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, the weekly Optimization Week, and the weekly Speed Tweak of the Week. He rode his bicycle from Montana to Alaska in 1980 as part of BikeCentennial.width and height attributes to resize larger images, or minimally crop and resize their images to lose vital information (see Figure 1). A better way to create images optimized for the Web is to crop them contextually. 
Contextually Cropping
Extreme Closeup for a Sneak Preview
Extreme Cropping through Rearrangement
JPEG Cropping Caution
About the Author
Further Reading
By website optimization on 17 Dec 2004 AM
thanks for the help-I'm a homemaker with a disabled spouse trying to figure out how to make an online income without it looking like I'm doing all this from my sewing room!
By: Anonymous on February 9, 2006 11:04 AM
This is a lovely tip, it's so simple that everyone can do it and it's effective for web photos. I'm sure it'll help a lot of people, including myself. Cheers
By: DanJ on November 13, 2006 6:37 AM
Want help. I have a binary image having a number of circles of different size. I want to crop the circle individually, and store as different images.
If a circle is of a different diameter is different then at least want algorithm for same size circles.
By: MOHAMED ARIF on January 24, 2007 11:23 AM
Increased speeds by 30-90% with our analysis and optimization services.
Increase conversions with adaptive multivariate testing to squeeze more leads out of your exiating traffic. Quickly boost your ROI.
Improve your site's look, usability and accessibility for a more credible and successful website.
