Webpage Images

One of the key factors for the popularity of the web is the creativity with which images of all sorts - photographs, diagrams, artwork, plots, multimedia clips, animations, etc. - can be integrated with textual elements. At the same time, users typically blame images for many of the usability problems that plague web access.

When to Use Images

Because images both attract and distract users, it's important to limit graphics to elements that are really needed. Wherever possible, use alternatives such as blocks of text on colored backgrounds, interspersed lists of bullets, "white space" (blank areas), and tables. Before adding any image, ask yourself what unique contribution it makes to the webpage and consider making that point in some other way. Reducing images is also a key tool for ensuring that your webpages are of proper size (see Page Size).

When you do use a graphic, consider reusing it on other pages. Today's browsers are able to cache images, which means that they don't have to be downloaded again the next time a page refers to them. Reuse also has the advantage of giving the user a sense of familiarity with your site. Within a webpage, reuse any arrows, buttons, or icons. Across pages, reuse the logo, header and footer images, and even photos. Performance-wise, the worst thing you can do is use a different photo on each page of your website.

According to user tests, animations are particularly annoying and can actually drive users away from a webpage or site. Don't use animation unless it truly adds to the meaning of the information. Animation can be a valuable tool, particularly for showing change over time; it should be saved for things like time-series information, fly-throughs of 3-D spaces or visualizations, or live camera images. Gratuitous movement on web pages, on the other hand, annoys users and ignores the fact that many users have older versions of browsers or do not have the newest sets of plug-ins available. (Contrary to what some web page developers believe, users will not download a new plug-in just because your page requires it.)

Making Images More Efficient

In addition to reuse, there are several ways you can handle images that will cost a little development time, but result in significant performance savings.

Always use the most efficient format for your images. For photographs, use JPEG with as much compression as possible. Other types of images should be stored using GIF format. Using an inappropriate format can double or treble the size of the file and the download time.

Reduce the resolution of the image as much as possible. If the image is primarily for viewing over the web, it can be quite small since computer displays are not capable of very high resolution anyway. In other words, any extra resolution is "wasted" but costs the user both time and space. Every reduction in resolution improves the image's download performance.

The only time a web image should be very high resolution is if it is intended for printing only (since printers have much higher resolution). In that case, be sure to include a thumbnail image on your webpage that links to the larger image, so that users not interested in printing a high-quality image do not have to download it.

Where possible, reduce the number of colors. There are only 216 colors that display consistently on all browsers, so why waste space and efficiency with an image containing many more colors? Many software programs allow you to "posterize" photos, thereby reducing the color requirements. Powerpoint tends to generate relatively efficient GIF diagrams and images, but if you're using Photoshop, Illustrator, or some other specialized software, save as many things as possible using "exact palette" or "reduced palette".

Example: A drawing with just four colors may "carry" hundreds of extra color data when saved in PhotoShop if you don't specify "exact palette." Careful choice of format can save literally megabytes of data.

If you prepare a lot of images, use a commercial image compression tool to reduce the size of the image files.

Spend a few extra seconds to include HTML attributes that improve performance. Explicit size attributes speed up the display of webpages, since the browser doesn't have to actually load the image in order to determine how much space to leave for it. Use WIDTH= and HEIGHT= specifications for all images. Also add ALT=short-description-of-graphic to each image specification so that users will be able to interact with the page, even before the images have been downloaded and displayed.

Improving Webpage Accessibility

Accessibility is an important issue, not just because it is socially unacceptable to disenfranchise users who do not have the same sensory capabilities as you do, but also because many users simply choose to disable images or sound from their web displays. This may be to reduce the downloading time, to make webpages fit on small displays like PDAs, or simply because the user does not care for graphics.

It is worth reiterating that you should use text rather than images wherever possible. Consider using colored blocks of text, tables, and bullet lists rather than set-in images. In many cases, these are just as effective at conveying information - and they have the added advantage of loading faster than the corresponding images would.

When images are needed, always include the ALT= attribute with a meaningful description of the image. Without these attributes, users with images disabled or who are visually impaired see nothing but a "missing image" icon. Useful ALT= text allows voice-enabled browsers to read out your webpage content and accommodate small-scale displays and slow modem connections. If used in combination with explicit size attributes, it can also make it possible for users to take action (such as clicking on an image link) before the entire page has downloaded.