Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Working With Large Images

Last updated Oct 17, 2003.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

Things have changed. In today's digital world, media such as print and CDs are quaint methods for sharing images and music from a time gone by. Mention your favorite album to anyone under 20 and you get puzzled stares. Pull out your slide trays and photo albums to groans of disbelief. No, sharing today takes place online. To share your favorite music, you don't make a CD, but an iMix. To share photos of your kids, you don't reach for your wallet, but your cell phone.

Image sharing is much easier online. In print, preparing images requires a clear understanding of color and resolution in order to reproduce, with some degree of fidelity, images on paper. There are significant costs associated with printing as well. By contrast, web images are easy to prepare, and it's easier and cheaper to reproduce color on a screen than it is on paper. However, there are costs associated with web images, and those costs are born by the user. In particular, large images affect usability, both because of lengthy downloads and limited on-screen display.

For all its advantages, web image publishing is not free of compromise. This article takes a look the bandwidth issues around reproducing large images on the web and provides strategies that allow designers to exploit the benefits of the technology without allowing large images to get in the way of access.

Bandwidth Reality

Not long ago, articles and books on web images would include a section on designing images using the web-safe color palette in order to accommodate users with 8-bit color displays. For those too young to remember those days, here's a quick overview. Displays can reproduce more or fewer colors, depending on the amount of video memory. In the olden days, when dinosaurs roamed the earth, computers were only capable of displaying 8-bit color. In those days, designers needed to create images that displayed reasonably well using a fixed palette of 256 colors. Today, color is not an issue on most desktop displays, although some small devices, such as mobile phones, have a limited range of color. Nonetheless, the discussion about color and web images has essentially died out.

NOTE

Browser Statistics at W3Schools reports that some users continue to view pages in 8-bit mode, which provides access to only 256 colors.

Some web designers might believe that discussions about bandwidth limitations should go the way of the dinosaurs, and of 8-bit color. However, the Bandwidth Report at WebSiteOptimization.com reports that, in the United States, "narrowband users connecting at 56Kbps or less... comprise 23.4% of active Internet users." As one of the 23.4%, I join with all those for whom bandwidth is still an issue, and those who pay by the byte for access to the Internet, in saying, "Size matters!" And, it will continue to matter for some time to come. Since images are one of the most common sources of bandwidth consumption, let's take a look at how we can manage two aspects of images—size and compression—to work within bandwidth limitations.

Managing Image Size

Web images are measured in pixels and, in general, the more pixels in the image, the larger the file size—and the larger the file size, the longer the image takes to download. The obvious conclusion is that smaller is better when it comes to web images.

There are a number of methods for producing small image files. Compression reduces file size by removing redundant or unnecessary image details. A compressed image has less information to store and display—hence, smaller files. But compression has its own costs—namely, image quality. For instance, JPEG compression results in significant file size reduction, but introduces visible compression artifacts that reduce the quality of an image (see Figure 1).

Horton12_fig01

Figure 1: The high-quality JPEG (above) is 56K; the low-quality image (below) is 6K, but the higher compression significantly reduces the quality of the image, as shown in the inset.

The best way to manage file size without sacrificing image quality is to reduce the dimensions of an image. Smaller images produce smaller file sizes, which means you can give more data to quality and less to the number of pixels needed to represent an image. Also, smaller images work better on small displays.

To understand the effect of image dimensions and compression on file size, let's take a look at some examples. First, look at the following large images (770 x 525). As you can see from the file sizes, compression is necessary in order for images this size to be reasonably accessible to users with bandwidth limitations. However, notice how the amount of compression needed to reduce the file size affects the quality of the image.

Now, take a look at this series of smaller images (400 x 373). Notice the gains in file size reduction simply by scaling the image to more modest dimensions.

When publishing web images, keep the dimensions as small as possible while preserving the purpose and intent of the image. Smaller images can be saved using less compression, resulting in higher-quality images.

Interfacing Large Images

Clearly, large images are sometimes necessary. For instance, the images for National Geographic's Photo of the Day must be large since they are the featured content on the page. Notice, however, that the photo dimensions are modest (470 x 324) and that the user is presented with interface controls for loading the full-size or wallpaper version. This preview allows users to make an informed decision about whether to commit the time and bandwidth to loading the full-sized version.

Preview images, or thumbnails, can be quite small and still serve their purpose. The following image (Figure 8) is only 100 x 69 pixels, but provides sufficient detail to serve quite respectably as a thumbnail.

Horton12_fig08

Figure 8: A high-quality thumbnail version (100 x 69) is only 5K

When large images are necessary, don't compensate by applying so much compression that the quality of the image suffers. Instead, provide access to large images using a thumbnail version of the original that provides enough information about the image that users can make an informed decision whether or not to load the full size version.

Resources

Yes, things have changed, and for the better. Web image publishing is easy and cheap, and there are few among us who long for the good ol' days of jammed slide trays and photo album pages that lose their stick. But still, for image sharing not to be a trial for users with bandwidth limitations, keep image dimensions modest and leave the choice of large image download up to users.

Save To Your Account