Balancing Image Quality and Speed: How to Shave Seconds off Your Download Time

By Laurie Larsen & Christine Phillips

The Internet has changed the way information is displayed. According to Weinman and Heavin, (1997) "It is no longer necessary to only create compelling visuals and information – the speed with which your site is viewed is also subject to critique," (p. 36). Internet audiences are not captive. They can leave, and often do, at any time. It is the daunting task of web designers to not only draw the audience into a page, but to keep them there. One way to attract and keep an audience is by maximizing image quality while minimizing download time. This can be accomplished by choosing appropriate graphic file formats and by utilizing a variety of file size reduction techniques.

GIF vs. JPEG: Which should you choose?

Graphic Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) are two formats commonly used for web graphics. Both JPEG and GIF images are cross-platform, which means they are viewable by just about any type of computer. This is a must due to the diversity of computers available on the market today. Both formats use compression techniques to reduce file size. Compression is especially important regarding the internet since it allows files to be transferred more quickly, thus reducing download time. Although both formats are appropriate for web design, it is important to understand how the two differ in order to determine the best format for a particular image.

GIFs deliver a "lossless" compression, meaning that the image does not lose quality in the process. JPEGs, on the other hand, are a "lossy" compression, meaning that information from the image is removed, thus causing some loss in quality. GIFs and JPEGs also differ in the number of colors they can display. GIF images are limited to 256 colors (8-bit), whereas JPEGs can utilize up to 16.7 million colors (24-bit). This is why JPEGs are best used for images where there are subtle transitions between colors. A GIF is the preferred format for images with large areas of solid, flat color. An added feature of the GIF format is the ability to allow the one color to be transparent. This feature gives web developers the option of making the background of irregularly-shaped images ‘invisible.’ This is accomplished by assigning the particular background color to be transparent. GIFs also offer the capability of browser-safe animation since they require no plug-ins and are supported by major browsers.

iguana lizard
JPEGs are best suited for photographs, water color images, pencil or charcoal drawings where there are subtle color or tonal changes. GIFs are best when used on images with large areas of solid, flat color like simple illustrations, logos, texts as graphics, or cartoons.

Techniques for file size reduction

After choosing the proper format for your image, it is often necessary to make further adjustments to decrease download time. Below are several quick and easy techniques for decreasing image file size.

Additional Compression

Tools such as Adobe IMAGEREADYTM and Photoshop allow you to optimize graphics for the web by altering levels of compression. As compression increases, file size decreases. Unfortunately this also decreases the quality of the image. The goal of a web developer is to find a compromise between image quality and speed.

origclown clown1 clown2 clown3
JPEG Original
27.2K
14 sec @ 28.8Kbps
JPEG 60 quality
9.203K
4 sec @ 28.8Kbps
JPEG 30 quality
6.273K
3 sec @ 28.8Kbps
JPEG 15 quality
5.244K
3 sec @ 28.8Kbps

(Note that the JPEG at 60 quality looks nearly identical to the original, but downloads 10 seconds faster. You can see the decrease in image quality as the file size decreases.)

Cropping

Cropping serves two purposes. It allows you to eliminate unnecessary information from your image, as well as reduces the image file size.

bigflower smallflower
13.42K 9.46K

Scaling

Many programs like FrontPage allow users to scale an image to fit a design space. A misconception is that image-size is correlated with file size. Although an image may look smaller on the screen, the file size will stay the same. A better option is to scale the image to the size needed using an image-editing program like Photoshop prior to importing the image into a commercial HTML editor.

Thumbnails

Using thumbnails is another technique for decreasing your pages download time. A typical thumbnail will take about one second to download which can be much faster than a full-size image. Thumbnails also let users control whether they want to download the full-size image or not.

buddha

CONCLUSIONS

The internet can be a powerful tool if you take the time to understand user’s preferences. It is a constant balancing act for web designers to get the fastest speed without compromising image quality. Staying on top of technological advances and employing appropriate techniques will ensure a web page is both pleasing to the eye and to the stopwatch.

References

Nicholson, S. (1998). GIF vs. JPEG: Choosing a graphics compression format for
web publications. Information Technology and Libraries, 17(2), 109-111.

Nielson, J. (2000). Designing web usability. Indianapolis, IN: New Riders Publishing.

Petrik, P. (2000). Top ten mistakes in academic web design. History Computer Review, 16(1), 63.

Weinman, L., & Heavin, B. (1997). Web file formats. Coloring web graphics 2: The definitive resources for color on the web. (pp. 36-57). Indianapolis, IN: New Riders Publishing.

Williams, R., & Tollette, J. (2000). The non-designers web book (2nd ed.). Berkeley, CA: Peachpit Press.

Tagged with: , , , , , ,
Posted in Usability News
Subscribe to SURL

Want to receive notifications when SURL has new articles? Please enter your name and email address to subscribe to our website.

Popular Topics in Usability News
Log in/Sign Up
%d bloggers like this: