Japanese Garden: Understanding image formats and optimization

Masanori Kawachi, Designer

www.csszengarden.com/096

WA IS THE JAPANESE CONCEPT of harmony. While bold and vivid design may be appropriate in some scenarios, evident in Japanese Garden are Masanori Kawachi's sensitivities to a more understated, universal aesthetic. Amid the strong individual signatures of the existing designs, he attempted to capture Wa and create a visually pleasing submission that appeals internationally.

The obvious Japanese elements of Kawachi's theme are indicative of his home country, but the effects are soft and the imagery appealing enough to make an impact on a viewer from any nation.

Image Formats

The delicate transparencies of Japanese Garden are possible only with a thorough knowledge of which image formats are available and how to use them. Out of the thousands floating around the world of computer graphics, three commonly supported formats are particularly suited to the WebGIF, JPEG, and PNG. All three offer image compression to shrink the final image size in preparation for download.

Why Does Optimizing Matter?

Why optimize? Since broadband is everywhere, do we still need to be so miserly with our images? While it's true that penetration of high-speed Internet access is always increasing, it's not universal. Plenty of users still connect with 56K modems, and in some countries phone lines are metered. Every kilobyte adds extra time to download, and every extra minute connected costs real money.

Note

In the United States, over 50 percent of households connected to the Internet were on broadband connections by mid-2004.

Let's not forget the server side either. High-traffic sites serve many users; the more bandwidth each individual consumes, the more total bandwidth the Web server needs, and hosting costs increase. Each kilobyte shaved off an image's file size means less time and money spent by both user and Web host; 2 Kbytes here and there may not sound like much, but these small savings add up quickly. For example, 2 Kbytes saved on an image viewed by 100,000 visitors a day represents savings of about 6 GB of total bandwidth per month. It doesn't take many of these little cuts to save some real money.

Understanding Image Choices

Each image format uses different color models, forms of compression, and transparency effects; choosing between them means knowing their strengths and weaknesses.

Lossless compression preserves all detail, while lossy compression sacrifices detail but keeps the file size smaller. Both have their place.

Color depth refers to the number of colors an image format contains. Color depth is measured in bitsa higher bit value offers a higher total color count. An 8-bit color depth is limited to 256 colors, while a 24-bit color depth boasts over 16 million.

Gif

The granddaddy of them all, GIF has been around in one form or another for almost 20 years. The lossless compression format it uses, called LZW, is best suited to large areas of flat color. Solid color illustration, type, and large swatches of a single color are best saved as GIF files.

While GIF is lossless, it makes use of a color index, which can be a double-edged sword. The color depth supports no more than 256 colors in one image, which limits its use to compressing images that contain few colors. But images with fewer than 256 colors may be saved with a smaller color index, thereby decreasing the eventual file size (FIGURES 1-3). An image with many colors may be saved as a GIF, at the expense of losing color informationwhich makes it a slightly lossy format after all.

Figure 1. This graphic was saved as a 256-color GIF, and the file size is 8.6 KBytes.

Figure 2. This graphic was saved as a 32-color GIF, and the file size is 5.0 KB.

Figure 3. This image was saved as a 4-color GIF, and the file size is 2.1 KBytes.

GIF offers 1-bit transparency, which means that pixels may be fully transparent or fully opaque; there is no in-between. This is limiting if you're used to working with layers and their full range of alpha transparency in an image-editing program. But it's still useful if the background on which your GIF will be placed is known ahead of time. Additionally, GIF supports simple frame-based animation and a staggered loading technique called interlacing, both of which increase file size.

JPEG

Thanks to its high 24-bit color depth, JPEG is well-suited for photographs and other colorful, detailed imagery. JPEG allows you to apply lossy compression to sacrifice minimal detail and color information for the sake of smaller file sizes. (FIGURES 4-6).

Figure 4. This JPEG was saved with a high-quality setting of 70. The file size is 8.3 KBytes.

Figure 5. This JPEG was saved with a medium-quality setting of 30. The file size is 3.7 KBytes.

Figure 6. This JPEG was saved with a low-quality setting of 10. The file size is 2.5 KBytes.

Heavily compressed JPEG images suffer from highly visible distortion and small unsightly pixel defects called artifacts. Although more detailed imagery masks this more effectively, when using JPEG a balance must be found between acceptable image degradation and a smaller file size. JPEG offers no transparency at all, but progressive JPEGs that function similarly to interlaced GIF files are supported in most browsers. (see "Optimization Tricks," later in this segment).

PNG

Much like GIF in some respects, PNG offers two modes of color storage. PNG files that have a 24-bit color depth are largealmost too largebut they are completely lossless. All color information and detail is preserved. PNG files that have an 8-bit color depth use a color index much like that of GIF, and in many cases the compression used by PNG will create smaller files than those created with an equivalent GIF setting (FIGURES 7-9).

Figure 7. This is a 24-bit PNG file. The file size is 16.2 KBytes.

Figure 8. This is an 8-bit, 64-color PNG file. The file size is 5.3 KBytes.

Figure 9. This is an 8-bit, 4-color PNG file. The file size is 2.2 KBytes.

Because of these dual color depths, in theory PNG may be used for any type of imagery; in practice it's best to stick with the same types of flat-color imagery you would normally use a GIF for, and save photographic and high-color imagery as a JPEG instead. A 24-bit PNG file may be lossless, but that comes at the expense of increased file size.

Two modes of transparency are also available, 1 bit and 8 bit. The former is equivalent to GIF's transparency, while the latter is full 256-level alpha transparency. The 8-bit transparency mode is useful as the background a PNG sits on doesn't need to be known in advance. Unfortunately, browser support for PNG alpha transparency limits this usefulness. Most notably, Internet Explorer for Windows won't properly render a PNG's alpha transparency.

Transparency Limitations

While many more graphic file types are available, these are the three basic Webfriendly image formats. JPEG offers no transparency at all, GIF's 1-bit transparency is limited, and PNG's 8-bit alpha transparency isn't supported by the most popular Web browser. The problem isn't a new one or even unique to CSS. For the past decade a simple fact of Web design has been that using transparency effects on the Web meant rendering images ahead of time and saving them into your desired non-transparent file format.

In Japanese Garden, Kawachi's layout places text within seemingly transparent white columns, which overlay a leafy green background image (FIGURE 10). GIF doesn't allow this type of translucency, but GIF is used anyway. Instead of trying to force transparency at the browser level, Kawachi made use of Adobe Photoshop's layer capabilities to save the white overlay directly into the GIF files. The ones used for background images behind the text columns don't actually make use of transparency at allthey're solid images. The final files appear to have a white overlay, but it's a visual illusion made possible by clever image manipulation.

Figure 10. Multiple opaque and pseudo-transparent images are combined in Japanese Garden.

When using them, special care must be given to transparent GIFsbecause only one level of transparency is possible, any semitransparent pixels must be blended into a specific background color, called the matte color. The matte must closely match the background color behind the GIF on the Web page; otherwise, a fringe of noticeably discolored pixels will result (FIGURE 11-13).

Figure 11. A transparent GIF saved for a white background, placed on a white background.

Figure 12. A transparent GIF saved for a white background, placed on a light green background.

Figure 13. A transparent GIF saved for a white background, placed on a dark green background.

Transparency is usually approached in either of these two ways on the Web, simply because they're tried and true methods. PNG's alpha transparency would allow alternative ways, but the lack of support in Internet Explorer for Windows makes it impossible to consider using PNG. Or does it?

While simply attaching a transparent PNG file to a design leads to an unpleasant result in Internet Explorer for Windows, there are various workarounds that can make it function properly. These methods are proprietary to Internet Explorer and have different requirements of their own, but they do work.

Optimization Tricks

The secret to small files is being able to trade off a certain amount of image quality to decrease the final size. The further you compress an image, the uglier the result; it's best to start with a high level of compression and adjust incrementally until you find a quality level you're willing to live with.

GIF

Optimizing a GIF means previewing at low color levels and working your way up until it looks reasonable. By starting a preview at 8 colors, then checking in 16, 32, 64, and so on, you get a sense of how few colors you can get away with. Some images require 256 colors (or more, which is when you need to consider using a JPEG instead), while others look almost indistinguishable from their full-color counterparts with only 8 or 16 colors.

There are further options when saving a GIF that affect the file size. For example, dither is a control that adds a dot pattern to break up flat color areas, which is useful for simulating many colors even though the compressed image contains few colors. But applying dither means a decrease in the efficiency of the compression. Turning off dither and increasing the number of colors may result in a smaller file than leaving it on and lowering the colors.

A relatively new feature to Photoshop is a lossy option for GIF files. No matter how small you've managed to compress your file, turning on the lossy option usually reduces it even further at the expense of image quality. A very small amount of lossiness, 5 or 6 percent, can often drop an extra 20 or 30 percent off a GIF's file size without noticeably affecting quality.

JPEG

Optimizing a JPEG is a much more straightforward matter. A slider with different quality levels should be present in your image editor when saving an image as a JPEG. Higher quality means larger file sizes; lower quality means smaller file sizes. Start with a low-quality setting, and gradually adjust it higher until the image looks acceptable.

Note

Workarounds for attaching a transparent PNG file to a design that will be viewed in Internet Explorer for Windows are described in these articles: "PNG Behavior"(http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html) and "Cross-Browser Variable Opacity with PNG: A Real Solution" (www.alistapart.com/articles/pngopacity).

Other advanced JPEG options are now supported by most browsers. Optimized is a setting that allows for slightly more compression than the default. Progressive JPEGs are more useful for large photos, but they add a bit of unneeded bulk. Just as it sounds, Blur is an option to blur an image for the sake of decreasing file size further.

PNG

Optimizing an 8-bit PNG is mostly identical to doing the same for a GIF; you are able to select color levels and dithering. Optimizing a 24-bit PNG is a simple matter: You can't. The only compression a full-color PNG offers is the compression built into the file format.

A Tough Choice

Until PNG's alpha transparency is correctly supported in all browsers, workarounds like Masanori Kawachi's prerendered transparency effects will continue to be popular.

Using the right file format for the job involves a trade-off between transparency capability, color depth, and compression; the two aren't necessarily related concepts, but they go hand-in-hand because of the file formats available. Sometimes compromises must be made; choosing the best format for the task at hand means being aware of your options.