Image Formats for the Web - HTML

Most user agents support, to some degree, three graphics file formats: GIF, JPEG, and PNG. The GIF and JPEG formats have been supported for quite some time (since the origin of the Web), while PNG is relatively new. This section covers the basics of the image formats.

Image compression
All three of these graphics file formats use some form of compression to store your image. Why is compression important? Uncompressed images can be large—consider Table 6-1, which compares image dimensions, number of colors, and file size for some sample, uncompressed images. As you can see, with file sizes like this, you would have to limit yourself to mighty tiny images, or two-color, such as black and white, images. Or, you could compress the files.

Compression options
When you implement file compression, you either have to throw away some information about the image or find a way to store the existing information about the image in a more intelligent manner. GIF files throw away some color information. JPEG files throw away some information about the image itself. PNG files store the information using a more intelligent algorithm.

Uncompressed Image File Size Comparison by Image Dimensions and Number of Colors

Uncompressed Image File Size Comparison by Image Dimensions and Number of Colors

GIF was the earliest format in use in inline images on the Web. Version 1 browsers could open GIF images inline, but required that JPEG images be opened out-of-line. GIF uses a compression scheme—called LZW compression—that predates CompuServe, even though you might see it called CompuServe GIF. CompuServe implemented LZW compression, thinking it was in the public sphere and then found out it was proprietary. A lot of lawyers sorted it out.

How does GIF work? Simply put, GIF indexes images to an 8-bit palette. The system palette is 256 colors. Before you can save your file in GIF format, the utility you are using simply makes its best guess at mapping all your colors to one of the 256 colors in an 8-bit palette.

Is a reduction in color depth a problem? That depends. GIF uses dithering to achieve colors between two colors on the palette. Even with dithering, however, GIF images of a sunset have stripes of color, where a smooth gradation would be more natural. GIF images also tend to have more cartoonish colors because flesh tones aren’t part of the palette. A GIF image of a drawing of something like a checkerboard, however, will look just fine.

JPEG takes a different approach. JPEG stands for the Joint Photographic Experts Group, the name of the group that created the standard. With JPEG, you get to keep all your colors, but you don’t get to keep all the data about the image. What kinds of images lend themselves to being compressed with JPEG? A tree. If you take a photo of a pine tree, the acorns are in specific places, but when the image is compressed and decompressed (opened on your Web page), the computer has to approximate where those acorns went, because it had to throw way some of the data. Is this a problem? Not with most photos of most pine trees. Faces also take well to JPEG because the colors are all there; faces in GIF can look unnatural because of the color loss.

Every generation 3 and higher browser can handle inline JPEGs. JPEGs are also ideal for showing gradient filled graphics (when the color changes gradually from one color to another). The same graphic would suffer enormously under the GIF compression because all those in-between colors wouldn’t be there. What suffers under JPEG compression? Text, schematic drawings, and any line art. Of course, with JPEG, you can select the level of compression (usually either as a percentage or as Maximum, High, Medium, or Low). You generally want to use the maximum compression level your image can handle without losing image quality. You won’t know how much compression your image can handle without loss until you try it at different levels of compression.

The Portable Network Graphics, or PNG format, was developed exclusively for the Web and is in the public domain. The PNG format takes advantage of a clever way of storing the information about the image so you don’t lose color and you don’t lose image quality; it is a lossless format. The only drawback is, because the standard is so new, only fourth-generation and later browsers support PNG graphics. Eventually, PNG will replace GIFs for many color-rich, still image files. Only GIFs can support animation and transparency.

Note: File formats that implement compression schemes that discard information about the image are called lossy file formats. Both GIF, which discards color information, and JPEG, which discards image information, are lossy file formats. File formats that don’t discard any information about an image are called lossless. PNG is a lossless compression scheme.

Image color depth
In the computer world, everything is black or white, on or off. Computers operate in the base two system, so when creating colors, your choices of colors are base two numbers. A bit is a representation of on or off (1 or 0). One-bit color uses a two-color palette (21). Two-bit color uses a four-color palette (22). Eight-bit color uses a 256-color palette (28). Thirty-two-bit color uses a 16.7-million-color palette (232).

Note: Between the two system palettes, there are 216 colors in common. This is called the 216-browser-safe palette. By limiting your graphics to colors from this palette, you can be sure the browser won’t have to guess or dither to achieve the color you want.

You might be thinking: Two colors: that’s not so bad. An artist can do a lot with two colors; think of the ways you can blend them. Unfortunately, this isn’t how computers work. When you select a color palette, you get only the colors in that palette, not any blends of colors in that palette. When you create an image, you want to balance the quality of the image against the file size of the image. When you send an image file over the Internet to a Web page, you send either information about the palette or you send the actual palette. With GIF files, you send a color look-up table (CLUT) with the image. With JPEG files, you send a palette. As you can imagine, this makes the files considerably larger.

Enhancing downloading speed
What can you do to ensure your pages download quickly? There are a few things:

  • Limit image file sizes.
  • Limit the number of images.
  • Reuse images as much as possible so images can be loaded from cache.
  • Use frames so only part of the browser windows need to reload.
  • Use text rather than images, where possible.

Image file sizes
You can limit image file sizes by doing the following:

  • Using the maximum compression your image will take
  • Using the smallest bit-depth your image can stand
  • Minimizing the dimensions of your image on the page

Test your pages at 640 × 480, 800 × 600, and 1024 × 768 to see how they will look to different visitors. Often, an image that renders well at 1024 × 768 and doesn’t dominate the page will look huge and overbearing at 640 × 480.

Number of images
How many images is the right number? You might be surprised to learn that sometimes very small images with white space between them load faster than one large image. Take advantage of white space to contribute to your images. You can use two intelligent techniques to get more image for the byte. By changing the background color to match the background color of your images, you can keep your images smaller. By anti-aliasing the text against that background to blend the edges into the background color, you can achieve the look of one large graphic with multiple small, fast-loading images.

Reuse images
Reusing images is as simple as having a single graphic for “home” on all your pages. Have a single bullet graphic (if you can’t stand to use the standard bullet) for every bullet on every page. Why does this help your pages load faster? Your browser checks to see whether an image it needs is already in cache and loads the image from cache, if it can. This reduces the number of bytes that actually needs to be downloaded.

Use frames
How can using frames speed download time? After the initial frameset loads, the browser will usually be loading one new frame at a time. Also, because the images are probably part of the banner and/or the navigational tools, the frame that does reload is less likely to be image-intensive.

Tip: By putting all or most of the images into one of your frames and the mostly text-based content into your main frame, you can save visitors from having to load the images more than once. After the initial load, subsequent loads will be faster.

Use text rather than images
You’ve read this elsewhere in the book. You can use tricks to make text look somewhat like an image. Instead of using a graphic with boxes and buttons for navigation, use a table with cells assigned different background colors.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics