Compression Methods: GIF vs.
JPEG vs. PNG
excerpted from WebReference.com
Compression algorithms re-encode image data into more compact representations of the same information.
Think of compression as using fewer words to say the same thing.
There are basically two types of compression methods: lossy and lossless.
Lossy compression creates smaller files by discarding (losing) some information about the original image.
It removes details and color changes it deems too small for the human eye to differentiate.
Lossless compression, on the other hand, never discards any information about the original file.
Graphic File Formats
The graphic file formats most browsers support are GIF, JPEG and, more
recently, Progressive JPEG (p-JPEG). New formats are appearing as
possible challengers, including PNG and those based on wavelet
compression. Let's take a look at each of these in more detail.
The Graphics Interchange Format (GIF, pronounced jiff, though most people say giff)
is the oldest graphic file format on the Web, and all browsers except Lynx support it.
GIFs are 8-bit images, which limits them to a maximum of only 256 colors.
GIFs use a lossless compression algorithm and support transparency, animation
(display of multiple images within a single GIF file) as well as
When you save an image as an interlaced GIF (by checking the Interlaced
option box in Photoshop) and display it
inside a web page, visitors to your site will see a low-resolution image quickly, which gradually comes into
focus. Non-interlaced GIFs, on the other hand, appear as an empty box with
a red "X" until the image downloads fully to your web visitor's
computer. The only drawback to interlacing is that it usually increases the file size
The LZW compression algorithm used in the GIF format is owned by Unisys, and
companies that make products that exploit the algorithm (including the
GIF format) need to license its use from Unisys. As for users of GIF
images, however, Unisys does not require a license, although their licensing
statement indicates that it is a requirement. Unisys says that getting a license
from them does not necessarily involve a fee.
Although the LZW compression algorithm used by GIFs is one of the better general purpose compression algorithms, it wasn't designed specifically for graphics.
As a result, it doesn't work well with bilevel (black and white) or true color images.
GIFs are best suited to flat-color
sharp-edged art or text. GIFs retain edge and sharpness information if there is no dithering. Humans are especially sensitive to edge sharpness, so GIFs generally appear sharper than JPEGs.
JPEG (pronounced jay-peg), is designed for compressing either full-color or gray-scale images of natural, real-world scenes.
JPEG is a lossy compression algorithm. When you create a JPEG or convert
an image from another format to a JPEG, you are asked to specify the quality of
image you want. Since the highest quality results in the largest file, you
can make a trade-off between image quality and file size. The lower the
quality, the greater the compression, and the greater the degree of information loss.
JPEGs are best suited for continuous tone images like photographs or natural artwork; not so well on sharp-edged or flat-color art like lettering, simple cartoons, or line drawings. JPEGs support 24-bits of color depth or 16.7 million colors.
JPEG is actually just a compression algorithm, not a file format. JPEG is designed to exploit certain properties of our
eyes, namely, that we are more sensitive to slow changes of brightness and color than we are to rapid changes over a short distance.
While JPEGs are usually the best choice for photographs, on 8-bit monitors they are force-dithered into an 8-bit palette. JPEG compression
is treated as 24 bit data (8 bit for gray), regardless of the
colors in the original image. Therefore, if you reduce an image from 24-bit to
8-bit prior to JPEG compression, the compression ratio will actually worsen as will the overall quality.
JPEG compression introduces noise
into solid-color areas, which can distort and even blur flat-color
graphics. This is why JPEGs are not well suited to flat-color
sharp-edged art or type. A JPEG can reduce a 900K 24-bit image to 45K (high quality) or 30K (medium quality), a factor of 20:1 to 30:1. With JPEGs,
however, the more you compress, the more edge definition and sharpness you lose.
JPEGs do not support transparency, either.
It is important to note that saving a graphic to JPEG format with compression
should be a last step. Compression effects are cumulative. This means that every
time you re-save a JPEG file, you are compressing it further, and thereby
tossing away data (photographic detail) that you can't get back.
Progressive JPEGs (p-JPEGs) are typically slightly smaller than baseline
JPEGs, but their
main advantage is that they appear in stages, giving the
effect of the image fading in, similar to interlaced GIFs, as opposed to painting from the top
All Web browsers support GIFs, most support JPEGs, and a rapidly growing
number support progressive JPEGs. All three formats are supported by
the latest versions of Netscape and Internet Explorer.
The Portable Network Graphic (PNG), pronounced ping, format was designed to be a better, legally
patent-free replacement for GIF. PNG is a lossless compression format for
transmitting a single bitmap image over computer networks. PNG matches all of GIF's features except
animation. PNG has better compression and interlacing than GIF and adds new features of its own,
such as gamma storage, full alpha channel, true color support, and error
detection. PNG supports two methods of transparency, one-color masking and
the other alpha channel. PNG's full alpha channel makes it possible to create beautiful glows and drop shadows which layer over different-colored backgrounds perfectly.
Gamma is a measure display device brightness. The problem facing web
designers is that gamma values for different platforms and different monitors vary. Macs have a gamma of about 1.8, and PCs a gamma of 2.2.
Since there is no "gamma standard" on the Web, graphics that look great on a Macintosh may look dark on a PC. GIFs and
JPEGs have no built-in gamma storage, so averaging these two gammas (setting
gamma to 2.0) in Photoshop
is one way of dealing with the problem. PNG avoids the problem by allowing designers to store the gamma of the creation device. When displayed, PNGs automatically adjust to the host monitor's gamma.
Not all browsers can display PNG's multilevel transparency. Support for PNG
by older Web browsers is mainly through plug-ins.
Because PNG uses the same LZW compression method used in the popular pkzip file archiving
utility, you can't zip
PNG files because they are, in effect, already zipped.
Figure 12 - Typical Compression Ratios for
Popular Web Graphics Formats
|Format||Typical Compression Ratios||Description
|GIF||4:1 - 10:1||Lossless for images <=== 256 colors. Works best for flat color, sharp-edged art. Horizontally oriented bands of color compress better than vertically oriented bands.
|JPEG (High)||10:1 - 20:1||High quality - has little or no loss in image quality with continuous tone originals. Worse results for flat color
and sharp-edge art.
|| JPEG (Medium)||30:1 - 50:1||Moderate quality - usually the best choice for the Web.
| JPEG (Low)||60:1 - 100:1||Poor quality - suitable for
thumbnails and previews. Visible blockiness (pixelation).
|PNG||10-30% smaller than GIFs||PNG's behave similarly to GIFs only better; they work best with flat-color, sharp-edged art. PNGs compress both horizontally and vertically, so solid blocks of color generally compress best.
The new JPEG 2000 spec includes wavelet, tiling, progressive, regions of interest... and the kitchen sink. It is aimed primarily at large imagery.
By offering functionalities such as multi-resolution representation, superior compression efficiency at low bit rates, lossy to lossless progression, and embedded bit stream architecture, the wavelet transform has been recognized as a preferred tool for image and video compression and has been selected as the fundamental building block of the emerging JPEG-2000
A Wireless Bitmap (WBMP) is a graphic image format for use when sending Web
content to handheld wireless devices. The format is defined as part of the
Wireless Application Protocol (WAP), Wireless Application Environment (WAE)
Specification. If you are creating Web content that is directed to handheld
phones or personal digital assistants (PDA) that have Web access, you use the
Wireless Markup Language (WML) to encode the page and its text. An image can be
included in the form of a WBMP file -- initially, supported only in
black-and-white -- that you can convert from a Graphics Interchange Format
(GUI), Tag Image File Format (TIFF), or other graphic formats.