Here's a quick overview of the three main web graphic formats (we're excluding Flash here, since it requires a plug-in, though we agree it is becoming a fourth major format): GIF, JPEG, and PNG. We'll compare the three formats, then use and display actual images saved in those formats (images courtesy of PickleZone.com). Let's begin with a quick comparison table: GIF Graphic Interchange Format Originally developed by CompuServe in the '80's, this format offers a maximum of 256 colors, is still used for simple animations, and is "lossless" - does not introduce pixel noise into images. Web art books recommend this format to keep clean edges around illustrations & text - though PNG offers the same advantage. JPEG Joint Photographic Experts Group Professional photographers and programmers worked out this solution (early '90's) to incorporate millions of colors in an image with a range of compressed file sizes depending on how much quality you wish to retain - the smaller the file, the lower the quality. PNG - 8 & 24 Portable Network Graphic Developed in the late '90's to offer improvements on both GIF and JPEG formats, the 8 bit PNG offers a maximum of 256 colors, but with a wider range of transparency options*. 24 bit PNG, offers millions of colors, like JPEG, but cannot reduce file size as much as JPEG because this format uses "lossless" compression methods. * Some transparency options built into PNG formats are not yet implemented in IE browser. From the comparison table and notes, we can develop some web graphic format usage guidelines: GIF, or PNG-8 work best to retain crisp detail in simple illustrations (less than 256 colors), and for web graphics containing text (so the text edges remain sharp) JPEG (also abbreviated as "jpg") is still great for photographs displaying millions of colors at a very small file size GIF is still the format of choice for simple animations (PNGs are not yet compatible for animations), though JPEGS are used in some FLASH animation work. PNG-24, though larger in file size, is a good choice if you don't wish to lose any quality (reduce details, and introduce pixels and noise not in the original photo - see examples below) in photographs Use higher quality JPEGS as more web surfers use high-speed broadband - remember... at the highest quality setting, JPEG is also lossless (see below)! Overview: At this time (mid 2000's) on the web, PNG-8 is a good choice for simpler images, while JPEG is still fine for photographs (remember you can increase the quality level), with PNG-24 available as another option with a larger file size, but lossless compression. Visual Comparisons: GIF, JPEG, & PNG Formats... It always helps to see exactly what is meant by terms like "lossless", "compression", and "image quality," so let's take a look. We'll compare three files - a photograph, a background, and a logo art file. As we examine and compare the images below, we need to keep in mind these important perception points: Most monitors offer no more than 96 ppi resolution (flat screens), and many offer just 72 ppi, limiting our ability to see defects in an image Images will appear different on different computer systems (darker on Windows based machines, than on Macs, for example), and in different lighting situations (fluorescent versus incandescent, etc.) Defects in images created by different formats are not as apparent at actual size (100%) as they are at zoom in sizes (though we'll zoom in so the differences are clear in the examples below) There are variations in how different monitors reproduce images, and also in the settings (brightness, etc.) that different users have implemented using system software Even though we have noted these important perceptual limitations, it is still easy to see some of the differences image formats make on your web graphics. First, let's compare a photograph (left) in GIF, JPEG, & PNG formats at 100% size... PNG versus GIF versus JPEG

Above, we use the "4-up" view in Photoshops' "Save for Web" to compare the original image with the three web graphic formats. Note that at 100% size, there is very little visual difference, though JPEG format offers the smallest file size, cutting download time by two-thirds (shown above as 103 seconds on a 56k speed modem, versus three times that for GIF or PNG-8 formats). Take a look at what is happening at 400% zoom: PNG versus GIF versus JPEG

We zoomed in on the eagles' head (use the accompanying tutorial files to do this on your own monitor). When you zoom in to 400%, you can compare what the different formats are doing to the pixels in the photograph. Both GIF and PNG-8 (top and bottom right) look grainy because they have less colors to work with to create transitions in the image (circled). JPEG format (bottom left) is also introducing some changes, apparent to the eye along edges between dark and light pixels (red arrow). Note that JPEG quality has been set to 35, a common setting favored by web masters who wish to achieve a smaller files size and faster download time - here, the download time for the JPEG is 1/10th that of the GIF or PNG-8 formats. Ok web masters... which format would you select for this photograph, and why? Looks like JPEG wins here, since it clearly offers the better download speed, and the defects at the edges are not too apparent at the 100% screen size at which people normally view the image. What exactly are those JPEG defects, or "noise", that everyone talks about? Good question. Take a look at the image below: PNG versus GIF versus JPEG

You can see definite decay in the image at the edges where the red arrows point, and also in the circled area, where extreme JPEG compression groups pixels in large square groups to save file size. Note that we've exaggerated the effect of JPEG compression by selecting "0" quality at the extreme low end of the scale - a setting we would never use... except to learn exactly what JPEG compression is all about. Uh-oh, looks like we are stuck with some image decay using JPEG (true or false? read on for the answer). But wait... what about PNG-24? Let's take a look, comparing it to JPEG at 500% size PNG versus GIF versus JPEG

Study the four images above, carefully (ideally on your own screen in photoshop, after first opening the accompanying tutorial file, then choosing Save for Web). While PNG-24 does render the image closest to the original, without introducing changes in how the pixels are displayed, it only cuts the file size by about 26%. While the upper right JPEG setting (Quality 35) cuts the file size to 2% of the original! However, some defects are apparent in the image due to the JPEG compression method. So do we opt for the PNG-24 format? No. Opt instead for a higher quality JPEG like the example at lower left above - Quality level 60 (also called "high" quality in Photoshop). This image has much fewer compression defects, and still is 1/16th the size of the original, and a 10th the size of the PNG-24. Sure... it takes a long while to download at 56k - but how much longer will a significant number of your audience be stuck at this slow modem speed (recent studies show that over 60% of homes in the US are connected via broadband service)? Photographers... stop worrying about decay with JPEG format! Why? You can save your original in RAW, TIFF, or Photoshop format to remain faithful to what your camera captured. Then save a web version of the photograph at the highest quality JPEG your web visitors can stand. And... at 100% Quality, JPEG saves smaller files, without detectable defects - at all. Now, to lock in our learning, we'll look at two more graphic images and consider the different file formats. GIF, JPEG, & PNG Comparisons on a Background and Logo Image...

Though we ended up recommending a good quality JPEG for the photograph above, let's see what format works best for a logo (right), then a background image. Take a look at format options for the logo, and you'll see why PNG-8 is a good format choice:

Above, we've enlarged the JPEG format preview so you can see the defects better - note that at the edges of text (especially on a white background), unwanted pixels, sometimes called "artifacts", are evident. Since this image is composed of less colors than the photograph, GIF or PNG-8 are good choices. PNG-8 actually compresses the image a bit more than GIF, so it is recommended here.

Next we'll compare format options for a background image (left). As web developers, we sometimes use an image like this at a small size and set it to repeat, or "tile", across or down a web page. Another option is to use the graphic large, and set it to not repeat using CSS controls, as a large background for an entire page. We'll take a look at file formats for two image sizes: for use as a repeating tile at 60 x 45 pixels and 72ppi, and as a large page background at 8 x 6 inches and 96 ppi. Let's take a look at format options for a small tile background at 200% zoom...

Above, comparing all three formats at 200% size (images look slightly jagged at this size, but are fine at 100% actual size), we can see that there is no visible difference. So, our choice is the JPEG, 80 quality (relatively high) at lower left, because this saves you a full second in download speed, and you know that more colors are displayed in JPEG format. What choice will we make for the larger version of the background? PNG versus GIF versus JPEG

Again, the JPEG version (lower left) looks best to us, this time with a lower quality setting of 30. Notice it would download 75% faster than either the GIF or PNG-8 version, with the added advantage of displaying more colors (millions versus 256 maximum). Learning Summary: At this writing, all three formats (GIF, JPEG, and PNG) are useful in different situations with PNG-8 becoming a better choice for simpler graphics than GIF, since it offers more transparency and compression options. Trusty old JPEG is still the best for smaller files and faster downloads. At broadband surfing speeds JPEG can rival PNG-24 quality when you set a higher quality level in Photoshop for your JPEG images.