Think of compression much like you would a balloon. You start out with a balloon filled with air - this is your image. By squeezing out (or compressing) all of the air, your balloon shrinks to a fraction of the size of the air-filled original. This balloon will now fit in a lot of spaces that were initially impossible. The end result is that you still have the exact same balloon, but just in a slightly different form. To get back the original balloon, simply blow up the balloon to its original size.

A direct analogy can be drawn with image compression. You start out with a very large file size of an image. By applying compression to the file, the file shrinks to a fraction of its original size. You can now fit more images onto a floppy disk or hard disk because they have been compressed and take up less space. More importantly, the smaller file size also means that the file can be sent over the World Wide Web much faster. This is good news for people browsing your web site, and good news for network congestion problems.

There are two different types of compression - lossless and lossy.

• Lossless
  A compression scheme in which no bits of information are permanently lost during compression/decompression of an image. This means that, just like the balloon analogy, even though the air is out of the balloon, it is capable of returning to its original state. Your image will look exactly the same before and after you've compressed it using a lossless compression scheme. The most common image format on the WWW that uses a lossless compression scheme is the GIF (Graphics Interchange Format) format. Although it is lossless, it has the capability of showing you a maximum of only 256 colors at a time. The GIF format is used mainly when there are distinct lines and colors in your image, as is the case in logos and illustration work. Cartoons are an excellent example of the type of work that is best suited for the GIF format. At this time, all web browsers support the GIF format.

  When converting an image to GIF format, you have the option to have the image display any number of colors up to 256 (the maximum number of colors for this format). A lot of images appropriate for the GIF format can be saved with as little as 8 to 16 colors which will greatly decrease the required file size compared to the same image saved with 256 colors. These settings can be specified when using Photoshop, an image editing tool that we will discuss later on.

• Lossy
  A compression scheme in which some bits of information are permanently lost during compression and decompression of an image. This means that, unlike the balloon analogy, an image will permanently lose some of the information that it originally contained. Fortunately, the loss is usually only minimal and hardly detectable. The most common image format on the WWW that uses a lossy compression scheme is the JPEG (Joint Photographic Experts Group) format.

  JPEG is a very efficient, true-color, compressed image format. Although it is lossy, it has the capability of showing you more colors than GIF (more than 256 colors). The JPEG format is used mainly when your image contains gradients, blends, and inconsistent color variations, as is the case with photographic images. Because it is lossy, JPEG has the ability to compress an image tremendously, with little loss in image quality. It is usually able to compress more efficiently than the lossless GIF format, achieving much greater compression. The more popular browsers such as Netscape do support JPEG, and it is expected that very shortly all browsers will have built-in support for it.

  It's important to note that since JPEG is a lossy image format, it is very important to have a non-JPEG image as your original. This way, you can make changes to the original and save it as a JPEG under a different name. If you need to make revisions, you can go back to the original non-JPEG image and make your corrections and only then should you save it as a JPEG. By opening a JPEG image, revising it, and saving it back out as a JPEG time and time again, you may introduce unwanted artifacts or "noise" that you may otherwise be able to avoid.

  A lot of people are scared off by the term "lossy" compression. But when it comes to real-world scenes, no digital image format can retain all the information that your eyes can see. By comparison with a real-world scene, JPEG loses far less information than GIF.

Both GIF and JPEG have their distinct advantages, depending on the types of images you are including on your page. If you are uncertain which is the best, it doesn't hurt to try both on the same image. Experiment and see which format gives you the best picture and the lowest cost in disk space.