Overview of Web Graphic Formats - GIF, JPEG OR PNG - Offtopic Forum

Offtopic Forum

Banner 12


Overview of Web Graphic Formats - GIF, JPEG OR PNG

This is a discussion on Overview of Web Graphic Formats - GIF, JPEG OR PNG within the Tutorials forums, part of the Answers category; Here's a quick overview of the three main web graphic formats (we're excluding Flash here, since it requires a plug-in, ...

Old 07-02-2008, 11:13 AM   #1 (permalink)
Points: 5,421, Level: 47 Points: 5,421, Level: 47 Points: 5,421, Level: 47
Activity: 43% Activity: 43% Activity: 43%
 Woot's Avatar
Woot has no status.
Status: OT Regular
Join Date: Jun 2008
Posts: 18,868
Thanks: 0
Thanked 19 Times in 18 Posts
My Mood:

Default Overview of Web Graphic Formats - GIF, JPEG OR PNG

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

Let's begin with a quick comparison:

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 transpareny options built into PNG formats are not implemented in Internet Explorer 6 or below.

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 in GIF, JPEG, & PNG formats at 100% size.

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.

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

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:

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?

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. Written by Scott Frangos
Woot is offline   Reply With Quote


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Error. Page cannot be displayed. Please contact your service provider for more details. (14)

All times are GMT -6. The time now is 09:39 PM.
Powered by vBulletin® Version 3.7.3
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC7

Nav Item BG