• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Creating Web Images

Chapter 4. Creating Web Images

What Program to Use?

In this chapter, I use Adobe Photoshop to work with images. It is the best all-around image editing program and is available for both Macintosh and Windows. The techniques in this chapter work with version 3 and up.

If you don't have Adobe Photoshop, I recommend trying Paint Shop Pro for Windows or GraphicConverter for Macintosh.

Creating images for the Web is a bit different from creating images for output on paper. Although the basic characteristics of Web images and printable images are the same, five main factors distinguish them: format, color, transparency, speed, and animation. This chapter will explain the important aspects of each of these five factors and how to use that knowledge to create the most effective images for your Web site.

Please note, however, that this chapter is no substitute for your image editing program's documentation. Nor is it meant to be a manual for learning about design. Instead, use this chapter to learn about the particular components and features that distinguish We images. Then combine that knowledge with your computing and design expertise to create awesome images for your page.

Now let's look at those five factors that you should keep in mind as you create Web images.


People who print images on paper don't have to worry about what their readers will use to look at the images. You do. The Web is accessed every day by millions of Macs, Windows-based PCs, Unix, and other kinds of computers. The graphics you use in your Web page should be in a format that each of these operating systems can recognize. Presently, the two most widely used formats on the Web are GIF and JPEG, with PNG gaining in popularity. Current versions of Explorer and Netscape can view all three image formats.


Unlike printed images, Web images are usually viewed on a computer monitor. You knew that. But did you know that some monitors (called 8 bit) are limited to displaying 256 colors? Further, the system software and browsers reserve up to 40 colors for their own use. When displaying images on these monitors, browsers use a particular set of 216 colors (256 minus 40), often called thebrowser safe palette. If the images on your page contain more than 216 colors, or if they contain colors other than the 216 in the browser safe palette, the browser will try to combine existing colors to reproduce the missing ones (called dithering). The results are not always pretty (Figure 4.1).

Figure 4.1. Both of these images have exactly 18 colors and look about the same on high-end monitors. But notice how the dither image is full of noise and patterning (called dithering) while the safe image is clean and sharp. That's because the safe image uses browser safe colors and the dither image doesn't.

If all your visitors have 24-bit monitors, you don't have a problem. According toStatmark (http://www.statmark.com), 35% of the general Web public have a 24-bit or better monitor. Some 55% have 16-bit monitors (called "Thousands" on a Mac), and only 10% are still on 256-color monitors. Still, if you want to make sure that images don't look fuzzy to these last folks, you should restrict at least the large areas of your images to colors that belong to the browser safe palette. For details on creating images with the browser safe palette, see page 66.


Transparency is important for two reasons. First, you can use it to create complex layouts by making one image move behind another. Second, you can take advantage of transparency to give an image a non-rectangular outline, adding visual interest to your pages (Figure 4.2). Both GIF and PNG allow transparency; JPEG does not.

Figure 4.2. The courthouse image's transparent background helps the image blend into the page, no matter what background color the visitor has chosen to view Web pages against. Real transparency is only available for GIF and PNG images.


The fourth principal difference between Web images and printed images is that your visitors have to wait for Web images to download. (Imagine waiting for pictures to appear in your morning paper!)

How can you keep download time to a minimum? The easiest way is to use small images. The larger an image's physical size, the longer it takes to appear before your visitors' eyes. For tips on reducing your image's physical size, see page 62.

The second way to speed up download time is by compressing the image. There are three popular compression methods (that correspond to the three major formats): LZW (for GIF images), JPEG, and PNG. LZW is particularly effective for computer-generated art like logos, rendered text, and other images that have large areas of a single color. In fact, if you can reduce the number of colors in an image, LZW can often (but not always) compress the image even more. For more details on reducing colors, see page 69.

JPEG, on the other hand, is better at compressing photographs and other images that have many different colors. In fact, if you blur an image, thereby creating even more colors, JPEG compression is often more effective (see page 77).

Of course, each method has its drawbacks. Because LZW is patented, developers have to pay royalties on software that uses it. This is one of the principal reasons the PNG format was created. Further, GIF images are limited to 256 colors. JPEG also has two disadvantages. First, it is lossy compression—deciding that the eye cannot distinguish as many colors as are in your original image, it may eliminate them permanently to save space. Uncompressing the image will not restore the lost data. Second, its compression information takes up a lot of space and is simply not worth it for smaller images. For details on compressing images with JPEG, see pages 76–77.

PNG compresses better than LZW without losing information like JPEG. Its major drawback is that Microsoft and Netscape have been slow to adopt it. For details on creating PNG images, see page 79.

Figure 4.3. Logotypes and other computer-generated images or images with few colors are compressed efficiently with LZW and thus could be saved in GIF format. Even better at compressing images of this type is PNG format, though fewer browsers can view PNG images inline.

Another way to keep your visitors happy while they're waiting is to offer a sneak preview of what the image will look like. All three major formats offer some form of progressive display, often calledinterlacing. For details on progressively rendering images, consult pages 73, 76, and 79.


One thing you won't be seeing on paper anytime soon are moving images. On the Web, they're everywhere. For information on creating animated images, see page 74. GIF (and not JPEG) images can be animated. You can also create animation with Flash (see page 351).

Figure 4.4. Full-color photographs and other naturally created images, or images with more than 256 colors should be saved in JPEG format.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint