Photoshop Tutorials

Discover the differences between the three main web graphic formats and learn the pros and cons of each format.

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:

{mostip image=tipon}Some transpareny options built into PNG formats are not implemented in Internet Explorer 6 or below. {/mostip}

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)!

{mostip image=note}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.{/mostip}

{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

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.

{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.

{mosimage} 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:

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

What choice will we make for the larger version of the background?

Share your Feedback