Home » Crop Images Contextually – image cropping techniques optimized jpeg gif & png graphics

Crop Images Contextually – image cropping techniques optimized jpeg gif & png graphics

Summary:

Crop images contextually for faster downloads and higher impact. By cropping maximally and resizing you can convey meaning without slowing down your web pages.

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.

andy king at alaska sign 1980 uncropped

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).

andy king at alaska sign 1980

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.

andy king at alaska sign 1980 close up

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.

3 thoughts on “Crop Images Contextually – image cropping techniques optimized jpeg gif & png graphics”

  1. 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!

    Reply
  2. 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

    Reply
  3. 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.

    Reply

Leave a Comment