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 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.
Figure 1: Andy King at Alaska Border (uncropped)
Contextually Cropping
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.</p.
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)
Extreme Closeup for a Sneak Preview
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)
Extreme Cropping through Rearrangement
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.
JPEG Cropping Caution
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 (16×16, 16×8, or 8×8 pixels for color JPEGs). Lossless crops are also possible by cropping to block boundaries with specialized software, like JPEG Wizard.
About the Author
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.
Further Reading
- Convert Graphic Text to Styled Text
- Converting graphic text to CSS text speeds up your site, makes it more accessible, and search engine friendly.
- Designing Web Usability
- Jakob Nielsen demonstrates cropping creatively in this New Riders Book of 2000 (pp. 135-140).
- Minimize Bit-Depth
- Minimize the number of colors in GIFs and PNGs to optimize file size. Lower bit-depths mean smaller palettes and code widths, which makes for smaller images.
- Pegasus Imaging
- Makers of JPEG Wizard, ImagXpress and other graphics-related products.
- Site Images with Width and Height Attributes
- Using width and height attributes on images ensures fast webpage display. Using the actual size for thumbnail images conserves bandwidth.
- Use Lossy Compression for Smaller GIFs and PNGs
- Lossy compression lets you squeeze more bytes out of your GIFs and PNGs. Lossy compression increases identical pixel patterns to improve compression in indexed-color images.
- Web Photos That Pop: Don’t Be Scared By Print Instructions
- Wendy Peck shows how to improve the quality of your images. From WebReference.com.
- Use Weighted Optimization
- Weighted optimization or regional compression applies different degrees of compression to different areas of your image. By varying the quality within images you can improve file size.
- Zoom In on the Best Image
- Wendy Peck shows how to find the right portion of an image to have the maximum impact. From WebReference.com.
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!
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
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.