JPEG and PNG
relative merits of image file formats for web use are worth exploring
in some detail. For a little while after the beginning of the WWW, the
Graphical Interchange Format (GIF) was the only choice available. Soon
the "Joint Photographic Experts Group" added the JPEG image
complession as another standard; and more recently a third choice is emerging,
Portable Network Graphic (PNG).
Deciding between GIF and JPEG (before PNG hit the scene) was easy: any
24-bit color depth (16.7 million colors) photographic-style image became
a JPEG, while images with less color, transparent areas, or animation
were GIFs; however, PNG complicates things because it offers some features
common to both formats, as well as a few unique features. To give you
a little background, I'll first spend a bit of time explaining a little
about each format.
"GIF" stands for "Graphics Interchange [file] Format".
Developed in 1987 by CompuServe as a means for computer users to share
pictures online, even if they weren't the same type of computer. GIF can
handle pictures with up to 256 colors. Through extensions to the format
introduced in 1989, GIF now supports animations and allows one of the
colors in the image to be transparent. The Graphic Interchange Format
(GIF) alows image files to be "losslessly" compressed up to
a ratio of 2:1 which means the original file is up to twice the size of
the compressed image. GIF should ideally be used on graphic and text based
images rather than full tonal renderings or photographs because Gif files
can never have more than 256 colors. You can use a program like Adobe
Photoshop, Fireworks, Imageready etc to convert the image file down to
a 256 (8 bit) or smaller color palette. Remember that GIF works from left
to right and top to bottom. The fewer changes it needs to note in this
sequence the smaller the resulting file.
example highlights that difference in GIF compression when you note that
the image on the left required only 295 bytes whereas the vertical orientation
of the identical image required 669 bytes.
this image as JPG, it becomes evident that the compression ratio differs
far less (870 bytes for the horizonal example and 913 bytes for the vertical).
looking at PNG as the third option, we note a similar compression to JPG
but a slight saving (854 bytes for the horizonal example and 904 bytes
for the vertical).
GIF file format pros and cons
Uses a relatively basic file compression (Lempel Zev Welch) that squeezes
out unnecessary colour description without data loss.
The LZW compression scheme is most efficient at compressing images with
large fields of homogeneous color. It is not very good at squeezing complex
pictures with lots of grainy texture. All variations of the GIF graphics
file format incorporate LZW file compression. The majority of images on
the Web are in GIF format .Gifs can be animated.
JPEG(medium compression) on the left is 4272 bytes
GIF in the middle is interlaced and only 2235 bytes
GIF on the right at 2501 bytes looks more ragged and is not interlaced
It is best to use GIFs for icons, logos, line drawings, simple cartoons,
and buttons requiring simple 8 bit (256 colour) identification.
GIFs allow you to make an area transparent. This is useful when you want
an image to display on top of a multi-coloured or textured background
without a solid coloured bounding box. GIFs can be animated.
The GIF format compresses by using fewer and fewer colours. So, if a graphic
only uses two or three colours, it will be translate into a tiny filesize
as a Gif. Small files download really fast, and you won't see any negative
results of compression (lossless compression).
Avoid GIF when converting photographic quality pictures which demand the
finer nuances of 16 (thousands of colours) and 24 bit colour (millions
in the late 1980s and early 1990s as a new standard for photographic images,
JPEG is very different from GIF. The biggest difference is that JPEG uses
lossy compression schemes. Lossy means that when an image is compressed,
stored in a JPEG, and later decompressed, it will be slightly different
from the original, uncompressed image. The rationale for such an odd concept
is that if you can't tell the difference, it doesn't matter (for casual
viewing) if the images aren't the same. If a little bit of data can be
discarded to improve the compression dramatically, it may be worth it.
It's common for JPEG's lossy algorithms to achieve 10:1 compression (the
uncompressed file is ten times the size of the compressed file) without
substantial loss in image quality.
The full JPEG standard has a lot of features that most
JPEG-capable programs do not use. In practical situations, JPEG can handle
24-bit full-color images and 8-bit grey-scale images. It does not handle
256-color images directly.
JPEG/ JPG stands for"Joint Photographic Experts Group."It is
arguably the best format to use for photographs on the web.
JPEG is superior to GIF for describing photographic content and complex
tonal renderings. It compresses by using complex algorithms, but maintains
the amount of colours the image contains. This is why it is good for photographs,
which typically contain far more than 256 colours (the maximum for a GIF
Avoided are graphics with very sharp edges. For example; a row of pure-black
pixels adjacent to a row of pure-white pixels (like a border or frame)
are less sharp in a JPEG format as is type.
JPEG on the left is the most compressed at 3017 bytes
JPEG in the middle is moderately squeezed at 5209 bytes
JPEG on the right at 9175 bytes claims the largest file size but also
retains the most detail.
JPEG was designed for photographic images. The compression scheme it uses
(DCT) is very specific to real-life images. It breaks the image into small
blocks, and sorts out how quickly colors change within that block, from
one side to the other. In photographic scenes, those changes have certain,
somewhat predictable characteristics. Some of those characteristics are
visually important; some are visually less important. By changing the
less important parts to values that help compress the data better, overall
compression can be improved a lot. And since only the visually irrelevant
bits have been changed, you won't notice the changes when you uncompress
the image. What's even nicer is you can usually tell your JPEG software
how much data it should consider relevant; the more data that's considered
unimportant, the more it can be adjusted to improve compression and reduce
the size of the file.
Of course, this assumes from the start that you're working with a photographic
image. Those visually irrelevant bits may not be so irrelevant for a different
type of image, say, a fractal, a hand-drawn image, or even a simple cartoon-like
drawing. How do you know if an image is good JPEG material? Fortunately
this is pretty easy: look for sharp transitions, any place where there
is an extremely abrupt change from one color or shade to another. If your
image has a lot of these, JPEG is going to have some problems.
4:4:4 and 4:2:2
JPEG actually offers two kinds of loss. One is the quality/compression
slider I've already referred to. The other is color subsampling. The idea
here is that the human eye is more sensitive to changes in brightness
than it is to changes in color. So one of the options in the JPEG formatvery
commonly usedis to store the color data at only half the resolution
of the brightness data. (JPEG doesn't use RGB, it uses a color system
that has a single brightness channel, Y, and two color channels, Cb and
Cr.) For photographs, this is good; real photos don't have sharp color
transitions any more than they have sharp brightness transitions, so this
shouldn't cause a problem. But for fractals, color transitions very often
occur with the same sharpness as brightness transitions, so disabling
this JPEG feature will help enormously.
The subsampling option is referred to as "4:2:2"
sampling. This means for every four pixels of brightness data, there are
2 Cb and 2 Cr pixels of color data. You don't want that. You want "4:4:4"
sampling, where there are equal (full) amounts of data in each channel.
Pronounced "ping", this is a fairly new (1995) format that was
designed to replace GIF. It handles images up to 256 colors, like GIF,
but it also handles 24-bit images like JPEG. It supports transparency,
like GIF, but also does it one better: rather than simple on/off transparency,
it allows a full range of "partially transparent" values. (this
means "alpha channel" control) PNG doesn't support animations,
but the MNG format (a variety of PNG) does.
Like GIF, PNG uses lossless compression. But PNG's compression is based
on a scheme called LZ77, which isn't patented (LZW is). PNG's compression
is usually about 25% better than GIF's.
PNG has only recently been added as a supported file format in web browsers.
Both MS Internet Explorer 4 and Netscape Navigator 4 and later support
PNG (provided PNG files are referred to from an HTML <IMG> tag)
but earlier versions do not.
There are situations where it's not appropriate to use JPEG. Images with
just a few colors, especially large areas of solid color, are better left
as GIF or PNG files. Images that require transparency can't be stored
in JPEG format. Animations have to be GIF. But any 24-bit image should
be considered for JPEG. If the image has sharp transitions, see if anti-aliasing
techniques can be applied. (This helps even 3D rendered images, although
most 3D software includes anti-aliasing as a built-in feature.)
It's also important to note that not all software will deliver identical
results. You will have to experiment to see how to obtain the optimum
relationship between quality and filesize.