Overview of Web Graphic Formats
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) | JPEG (Joint Photographic Experts Group) | PNG - 8 & 24 (Portable Network Graphic) |
|---|---|---|
| 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. | 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. | 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. |
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)!
{mosimage title=Visual Comparisons: GIF, JPEG, & PNG Formats}
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
{mosimage} First, let's compare a photograph in GIF, JPEG, & PNG formats at 100% size.
Take a look at what is happening at 400% zoom:
Ok webmasters... 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: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
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)?{mostip image=tipon}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.{/mostip}
Now, to lock in our learning, we'll look at two more graphic images and consider the different file formats.
{mospagebreak title=Gif, JPEG, & PNG Comparisons on a Background and Logo Image} 
Posts
Post a Comment