GIF, JPEG and PNG

The relative merits of image file formats for web use are worth exploring in some detail. For a little while after the beginning of the WWW, the Graphical Interchange Format (GIF) was the only choice available. Soon the "Joint Photographic Experts Group" added the JPEG image complession as another standard; and more recently a third choice is emerging, Portable Network Graphic (PNG).

Deciding between GIF and JPEG (before PNG hit the scene) was easy: any 24-bit color depth (16.7 million colors) photographic-style image became a JPEG, while images with less color, transparent areas, or animation were GIFs; however, PNG complicates things because it offers some features common to both formats, as well as a few unique features. To give you a little background, I'll first spend a bit of time explaining a little about each format.
 

 

GIF
"GIF" stands for "Graphics Interchange [file] Format". Developed in 1987 by CompuServe as a means for computer users to share pictures online, even if they weren't the same type of computer. GIF can handle pictures with up to 256 colors. Through extensions to the format introduced in 1989, GIF now supports animations and allows one of the colors in the image to be transparent. The Graphic Interchange Format (GIF) alows image files to be "losslessly" compressed up to a ratio of 2:1 which means the original file is up to twice the size of the compressed image. GIF should ideally be used on graphic and text based images rather than full tonal renderings or photographs because Gif files can never have more than 256 colors. You can use a program like Adobe Photoshop, Fireworks, Imageready etc to convert the image file down to a 256 (8 bit) or smaller color palette. Remember that GIF works from left to right and top to bottom. The fewer changes it needs to note in this sequence the smaller the resulting file.

This example highlights that difference in GIF compression when you note that the image on the left required only 295 bytes whereas the vertical orientation of the identical image required 669 bytes.

Saving this image as JPG, it becomes evident that the compression ratio differs far less (870 bytes for the horizonal example and 913 bytes for the vertical).

Finally, looking at PNG as the third option, we note a similar compression to JPG but a slight saving (854 bytes for the horizonal example and 904 bytes for the vertical).

GIF file format pros and cons
Uses a relatively basic file compression (Lempel Zev Welch) that squeezes out unnecessary colour description without data loss.
The LZW compression scheme is most efficient at compressing images with large fields of homogeneous color. It is not very good at squeezing complex pictures with lots of grainy texture. All variations of the GIF graphics file format incorporate LZW file compression. The majority of images on the Web are in GIF format .Gifs can be animated.

The JPEG(medium compression) on the left is 4272 bytes

The GIF in the middle is interlaced and only 2235 bytes

The GIF on the right at 2501 bytes looks more ragged and is not interlaced

Gif strenght
It is best to use GIFs for icons, logos, line drawings, simple cartoons, and buttons requiring simple 8 bit (256 colour) identification.
GIFs allow you to make an area transparent. This is useful when you want an image to display on top of a multi-coloured or textured background without a solid coloured bounding box. GIFs can be animated.
The GIF format compresses by using fewer and fewer colours. So, if a graphic only uses two or three colours, it will be translate into a tiny filesize as a Gif. Small files download really fast, and you won't see any negative results of compression (lossless compression).
Gif weakness
Avoid GIF when converting photographic quality pictures which demand the finer nuances of 16 (thousands of colours) and 24 bit colour (millions of colours).

JPEG
Developed in the late 1980s and early 1990s as a new standard for photographic images, JPEG is very different from GIF. The biggest difference is that JPEG uses lossy compression schemes. Lossy means that when an image is compressed, stored in a JPEG, and later decompressed, it will be slightly different from the original, uncompressed image. The rationale for such an odd concept is that if you can't tell the difference, it doesn't matter (for casual viewing) if the images aren't the same. If a little bit of data can be discarded to improve the compression dramatically, it may be worth it. It's common for JPEG's lossy algorithms to achieve 10:1 compression (the uncompressed file is ten times the size of the compressed file) without substantial loss in image quality.
    The full JPEG standard has a lot of features that most JPEG-capable programs do not use. In practical situations, JPEG can handle 24-bit full-color images and 8-bit grey-scale images. It does not handle 256-color images directly.
JPEG/ JPG stands for"Joint Photographic Experts Group."It is arguably the best format to use for photographs on the web.

JPEG strenght
JPEG is superior to GIF for describing photographic content and complex tonal renderings. It compresses by using complex algorithms, but maintains the amount of colours the image contains. This is why it is good for photographs, which typically contain far more than 256 colours (the maximum for a GIF image).
JPEG weakness
Avoided are graphics with very sharp edges. For example; a row of pure-black pixels adjacent to a row of pure-white pixels (like a border or frame) are less sharp in a JPEG format as is type.

The JPEG on the left is the most compressed at 3017 bytes

The JPEG in the middle is moderately squeezed at 5209 bytes

The JPEG on the right at 9175 bytes claims the largest file size but also retains the most detail.

JPEG on Photographs

JPEG was designed for photographic images. The compression scheme it uses (DCT) is very specific to real-life images. It breaks the image into small blocks, and sorts out how quickly colors change within that block, from one side to the other. In photographic scenes, those changes have certain, somewhat predictable characteristics. Some of those characteristics are visually important; some are visually less important. By changing the less important parts to values that help compress the data better, overall compression can be improved a lot. And since only the visually irrelevant bits have been changed, you won't notice the changes when you uncompress the image. What's even nicer is you can usually tell your JPEG software how much data it should consider relevant; the more data that's considered unimportant, the more it can be adjusted to improve compression and reduce the size of the file.
Of course, this assumes from the start that you're working with a photographic image. Those visually irrelevant bits may not be so irrelevant for a different type of image, say, a fractal, a hand-drawn image, or even a simple cartoon-like drawing. How do you know if an image is good JPEG material? Fortunately this is pretty easy: look for sharp transitions, any place where there is an extremely abrupt change from one color or shade to another. If your image has a lot of these, JPEG is going to have some problems.
   
4:4:4 and 4:2:2
JPEG actually offers two kinds of loss. One is the quality/compression slider I've already referred to. The other is color subsampling. The idea here is that the human eye is more sensitive to changes in brightness than it is to changes in color. So one of the options in the JPEG format—very commonly used—is to store the color data at only half the resolution of the brightness data. (JPEG doesn't use RGB, it uses a color system that has a single brightness channel, Y, and two color channels, Cb and Cr.) For photographs, this is good; real photos don't have sharp color transitions any more than they have sharp brightness transitions, so this shouldn't cause a problem. But for fractals, color transitions very often occur with the same sharpness as brightness transitions, so disabling this JPEG feature will help enormously.
    The subsampling option is referred to as "4:2:2" sampling. This means for every four pixels of brightness data, there are 2 Cb and 2 Cr pixels of color data. You don't want that. You want "4:4:4" sampling, where there are equal (full) amounts of data in each channel.

PNG
Pronounced "ping", this is a fairly new (1995) format that was designed to replace GIF. It handles images up to 256 colors, like GIF, but it also handles 24-bit images like JPEG. It supports transparency, like GIF, but also does it one better: rather than simple on/off transparency, it allows a full range of "partially transparent" values. (this means "alpha channel" control) PNG doesn't support animations, but the MNG format (a variety of PNG) does.
Like GIF, PNG uses lossless compression. But PNG's compression is based on a scheme called LZ77, which isn't patented (LZW is). PNG's compression is usually about 25% better than GIF's.
PNG has only recently been added as a supported file format in web browsers. Both MS Internet Explorer 4 and Netscape Navigator 4 and later support PNG (provided PNG files are referred to from an HTML <IMG> tag) but earlier versions do not.

Summing Up
There are situations where it's not appropriate to use JPEG. Images with just a few colors, especially large areas of solid color, are better left as GIF or PNG files. Images that require transparency can't be stored in JPEG format. Animations have to be GIF. But any 24-bit image should be considered for JPEG. If the image has sharp transitions, see if anti-aliasing techniques can be applied. (This helps even 3D rendered images, although most 3D software includes anti-aliasing as a built-in feature.)
It's also important to note that not all software will deliver identical results. You will have to experiment to see how to obtain the optimum relationship between quality and filesize.