- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Usability Tips You Can Use: Designing Navigation with Lists
- Usability Tips You Can Use: Designing Forms for Keyboard Access
- Usability Tips You Can Use: Designing Flexible Layouts
- Usability Tips You Can Use: Designing Accessible Audio
- Designing Accessible Text—Part 1: Structure
- Designing Accessible Text—Part 2: Text Size
- Designing Accessible Text—Part 3: Color
- Designing Accessible Text—Part 4: Typeface
- Designing Usable Forms
- Designing Pages for Linear Access
- Designing Data Tables
- Working With Large Images
- Writing Link and Heading Text
- Writing Alternate Text for Images
- Cascading Style Sheets Part 1: Browser Styling
- Cascading Style Sheets Part 2: Shorthand
- Cascading Style Sheets Part 3: Media Style Sheets
- Cascading Style Sheets Part 4: Selective Printing
- Cascading Style Sheets Part 5: Styling for Print
- Cascading Style Sheets Part 6: Styling for Small-Screen Devices
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
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.
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.
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).
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.
Figure 6: Medium quality (20K)
Figure 7: Low quality (12K)
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.
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.
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.
- To learn more about web images, the Graphics chapter of Web Style Guide contains an in-depth discussion of color displays.
- For concrete measures of bandwidth consumption, WebSiteOptimization offers a Web Page Analyzer that, among other things, calculates the download time for web pages.
- For more demographics, the Bandwidth Report, Internet World Stats, ClickZ Stats, and Citizens Online have statistics on Internet usage and connectivity. Browser Statistics and Browser News Stats > Trends have statistics about browser and system usage.