Different image formats are optimized for different kinds of images. The different formats “compress” the image to give it a smaller file size. Smaller file sizes mean faster download times.
I’ll be giving some examples of what image compression formats do to images, using one cartoon-style image and one photographic-quality image. Here are the originals:
The cartoon is 25.3 kilobytes in memory. The photo is 144 kilobytes in memory.
Format: GIF
GIF compression is optimized for “cartoony” images, images that have only a few colors and that have sharp gradations of color. A cartoon drawing of a landscape might well have only four colors: blue for the sky, white for the clouds, green for the grass, and maybe black for an outline. GIF uses this to make the image’s file size far smaller than the image itself. There might be two hundred pixels all of the same blue, then fifty pixels all of the same white, then another fifty pixels of the same blue, and so on. The GIF-compressed version of the image will not list all three hundred pixels. It will simply say “200 blue, 50 white, 50 blue”. What takes up about three hundred “slots” on the screen will take up about six in the file.
You can see that lots of gradations would break down this method. Because of this, GIF doesn’t even work with images that have more than 256 colors. If the image has more than 256 colors, saving it as GIF will merge as many colors as it needs to, to bring the number of colors down to 256.
GIF can do our cartoon in 16 colors, and bring the file size down to 2.4 kilobytes. Our photo has to be brought down to 256 colors and has a file size of 31.6 kilobytes. It looks somewhat okay, but has a distinct graininess.
Transparency
GIF files can also be made transparent. You choose one color and tell your image editor to set that one color as the transparency color. When a web browser displays that image, it will not display that color. Wherever that color appears in your image, whatever color is behind it will show through. For example, if your background color is white, and you set “blue” to be the transparency color in the above cartoon, you’ll end up with a white sky. If your background on your page is a photo of your friends, then your friends will show where the sky is.
Only one color can be made transparent, and everywhere that color appears will be transparent, no matter where it is in the image. This means that you will usually want to choose a color that does not appear anywhere else in the image, and “fill” your desired transparent area with that odd color. It also means that if your GIF has subtle variations, you will end up with a “glow” around the borders where your transparency ends. In the above cartoon, for example, if instead of sharp border between the blue sky and the white cloud there was a gradation of color from blue, to light blue, to lighter blue, to white, only the blue would be transparent. The light blue and the lighter blue would not be transparent, resulting in a light blue glow around our cloud.
GIF: GIF Movies
I’m not going to say much about it here, because it’s a topic in itself, but you can make very simple movies with GIF images. If you remember seeing flipbooks as a kid, where you flipped the pages really fast to see a cartoon image start moving on the bottom of the page, that’s what a GIF movie is. You draw a series of simple images and tell your image editor to put all of the images together in the same GIF file. When a web browser displays that file, it will display your images in sequence, in the speed your image editor set. The images can also be set to repeat.
Format: JPEG
JPEG compression is optimized for photographic-quality images. If you try to use JPEG on a cartoony image, the image will look horrible and it will be larger than a corresponding GIF image. But JPEG’ed photographs will look far better as a JPEG than as a GIF. Photographic quality images have many colors.
Where a blue sky in a cartoon drawing may only have one or two different blues, a real blue sky has millions of blues. A real cloud has millions of shades of white and gray. GIF’s compression format quickly falls apart with this many colors. When there is only one pixel of white, another pixel of off-white, and another pixel of off-off-white, GIF will end up using more space to store the image than the image takes up in memory!
JPEG uses that quality of nature to compress the image differently. It looks at a small square of the image and examines some colors inside that square. If the colors are all close enough to each other, JPEG stores that block with a single color. If the colors are not close enough to each other, JPEG makes smaller square until they are. If you try to JPEG-compress a cartoony image, you can often see these squares, because cartoony images are not (by our current definition) made of slight gradations of color. But photographs are, and JPEG’s compression method works great for them.
If we try to save our cartoon as a JPEG image at 2.4 kilobytes, the image quality suffers considerably. To get the same quality as our original, we need to save at a high quality and 27.6 kilobytes—larger than the original, uncompressed image!
Our photo, however, has none of the graininess that it did when we saved it as a GIF, and it only takes up 9.8 kilobytes. It looks better, and it takes up a third of the file size that it did as a GIF.
Size and Quality Trades
One nice advantage of JPEG’s compression scheme is that it allows you to trade off quality for file size, or trade off file size for quality. You can affect what JPEG thinks of as “close enough”. Give it more leeway and it will create smaller files. Give it too much leeway and your images will be severely degraded. Any good image editor will let you view the image as you trade off (usually with a slider) between file size and image quality.
Once you have reduced the quality of your image, you cannot get it back! When working with JPEG images, you must keep an original high quality version of your image!
Format: PNG
PNG is mostly a higher-quality replacement for GIF. Like GIF, it is a non-lossy format. But it can be “non-lossy” in higher resolutions than GIF can. It can save both photo-quality and cartoony images. It does not have the ability to trade quality for file size, however, at least as normally implemented.
Our cartoon is only 975 bytes (that’s less than a kilobyte) as a PNG file, with no loss of quality. Our photo is 82.3 kilobytes. While there is no loss of quality (which you probably won’t even be able to see on paper), the file size is still significantly larger than the corresponding JPEG file. If you’re willing to put up with a slight loss of quality, the JPEG compression format is currently unparalleled for compressing photographic-quality images for the web. Because PNG is non-lossy, however, it is a very useful format for storing your original images.
Transparency
PNG images can also be transparent. You will need to follow the instructions in your image editor, but PNG files have an alpha channel. Instead of specifying which color is transparent, you add transparency to the part of the image that needs to be transparent. This means that the same color can be transparent in some areas and not transparent in others. Transparency in a PNG image can also be less than 100%. This means that you can make the transparency fade in or out from the area that you need to be transparent. This solves the “halo” effect that some transparent GIF images have.
Transparency is not completely supported among web browsers, however, so if you do choose to use transparency in your PNG image, take care that the image remains acceptable if the transparency is ignored.
