Vol. 2, No. 3
All About Images for the Web

Hence the huge popularity of the Web and its ubiquitous images. But how exactly does one best deploy images on the Web? You know the basics of how to put an image on a Web page -- if you don't, check out this back issue:

http://www.tripod.lycos.com/build/better_builders/newsletters/news_5.html

But when you're creating images, what about that? What are the different image formats all about? What are they good for? How does compression work?

Well. Glad you asked.

At present, the vast majority of images on the Web are in one of two formats: JPEG and GIF. (JPEG is pronounced "jay-peg"; you can get into a bit of a scuffle if you choose the wrong side of the debate as to whether GIF is pronounced with a soft or a hard G, so let us say no more on that question.) JPEG stands for the body that created the standard, the Joint Photographic Experts Group; GIF stands for Graphics Interchange Format.

In theory at least, images on the Web are compressed versions of bigger image files with.

For detailed photographs, images with lots of colors, and suchlike, JPEG is your man. It supports 24-bit color, which works out to millions of colors. The compression used is "lossy," which means that some data is lost in the process of taking a huge bitmap image and squeezing it down into a JPEG. The more highly compressed the image is, the smaller the file size gets, but more and more data is lost, and the image looks worse and worse. When compressing a JPEG image (using image optimization software such as Adobe's ImageReady or Macromedia's Fireworks), you need to find a happy medium between beautiful and tiny.

GIF files, on the other hand, are suited to images like cartoons, text, and Mondrian paintings -- images containing 256 or fewer colors, ideally in large blocks. Given this kind of information, GIF files can be compressed losslessly: the file size shrinks by approximately half without sacrificing any data at all. To fudge a lot of technical information into a glib explanation, that's because the GIF format basically says, "Okay, this whole area is red" rather than explaining laboriously about how this pixel is red, and that pixel is red, and oh yes, that other pixel is red too, what a coincidence. GIFs have a couple of neat features, including support for transparency, so you can see the background through the image, and the ability to be animated (for which, see another fantabulous Handcrafted back issue: http://www.tripod.lycos.com/build/better_builders/newsletters/news_19.html ) The JPEG format is a public standard, free for anybody to use, but Unisys, the creator of the GIF format, has made it clear that they hold the right to charge anyone who uses GIF images a $5,000 license fee. This is enforced selectively at best, but still it's caused a bit of consternation among Web builders, and as a result there's a move toward PNG images instead.

PNG (pronounced "ping") stands for Portable Network Graphics. It's an open format designed to replace GIF, and it improves on GIF in a few key ways, including improved compression and support for up to 48-bit color. Many Web builders are now using PNG images exclusively instead of GIFs, but PNGs are only supported by newer browsers, so watch out lest you break compatibility for your less up-to-date users.

All of these are bitmap-style images. That means that they are meant to be a fixed size: that kitten has exactly eighteen pixels between the tips of its ears. An alternative way of doing images is the approach taken by such software as Flash: vector images. These are based on definitions of what's in the picture, rather than pixel-by-pixel breakdowns. As a result, they can be displayed in any size without losing detail or becoming blocky or fuzzy.

The elves behind the Web are hoping that SVG images, or Scalable Vector Graphics, will become the new standard for Web images soon. These vector images can be zoomed and shrunk within a browser and printed at magazine-quality resolutions, and have file sizes significantly smaller than the bitmap images we're used to.

Meanwhile, the group that developed JPEG are putting the finishing touches on JPEG2000, a new image standard for the new millennium, involving greatly improved compression, using wavelets, to allow for high image quality with small file sizes. It's hard to predict what kind of images the Web will be made of in two years, but it's safe to say that the kitten pictures will be as cute as ever.

HINTS, POINTERS, AND TIPS O' THE TRADE :

There's no quicker way to annoy visitors to your site than to have huge images that take forever to load. Check out Webmonkey's discussion of how to optimize images: http://www.webmonkey.com/99/15/index0a.html?tw=659

If you're totally at a loss as to what format the image you're creating should be in, you can try saving it in multiple formats and judging by eye -- which looks best, and which file size is smallest?

Sometimes even a very short nap is better than no nap at all.

RESOURCES:

The Unisys GIF controversy: http://lpf.ai.mit.edu/Patents/Gif/Gif.html

All about PNG: http://www.libpng.org/pub/png/

Webmonkey on image formats: http://www.webmonkey.com/geektalk/97/30/index3a.html?tw=659

Handcrafted Archive