|
GIF versus JPEG Compression
This is such a misunderstood topic that I thought I'd add a short explanatory
page on just how GIF and JPEG compression works.
However, you might just want to go to this
page because it's much better done
and up-to-date!
GIF: Graphics Interchange Format
A GIF (jiff) is "lossless" compression, meaning that each pixel of
color is written to a file, like a bitmap. If you were to look at a GIF image
as a text file (and you could read its code), you would see first the list of
colors used in the image. Each color is assigned a number for use in that image
-- if you have white pixels, for example, the code at the beginning would say
that #FFFFFF (the hex number for white) equals "1" or something like
that. Because this format lists each color at the head of the file, the fewer
colors used in the image, the smaller the file size will be. In addition, GIFs
only list a maximum of 256 colors.
 Next
you would see the image broken down into horizontal rows, with the color listed
for each pixel. In the sample image at right, the first 14 pixels are yellow,
so they would be written (in English) as "1-14, yellow". The next
72 pixels are black, so they would be written, "15-86, black". The
last 14 pixels in the row are yellow again, so they would be written, "87-100,
yellow". Similarly, the next row would have "1-14 yellow," then
"15, black," then "16-85, white," et cetera.
 |
 |
| Stephen as a JPEG |
Stephen as a GIF |
Because of this method of compression, images with a lot of noise or more than
256 colors will make the file size quite large. For example, if you save a photograph
as a GIF (the very thought of which makes me cringe!), the file must list a
full 256 colors, and the image part of it will be a huge stream of single pixels.
So you'll end up with a huge file whose color information is a lot worse than
what you started with.
As you can see in the blown-up images at right, the JPEG image is a lot smoother
and more natural-looking than is the GIF, which is heavily pixilated.
There are a few things you can do with GIFs that you can't do with JPGs, however.
GIFs can have transparent areas, so that one color allows the background to
show through. And you can make animated GIFs, though these are rarely a good
idea in terms of design. Macromedia Flash is quickly becoming the standard for
web animation, as it is a much more compressed format for animation.
GIFs are still the best format for plain text, line drawings, cartoon images,
and images with large areas of a single color, all of which will show degradation
in JPEG format, due to the nature of its compression algorithms.
JPEG: Joint Photographic Experts Group
The JPEG (jay-peg) format was created specifically for use with photographs,
rendered images, and other pictures with large numbers of colors that blend
together. It is "lossy" compression, meaning that information about
the image is lost each time it is compressed, and repeated compressions can
result in severely degraded images.
JPEG compression works, in essence, by breaking the image into gradient shapes.
This means that areas of a similar color are grouped together, and the edges
are fuzzed with the next group. The more compressed the image is, the fewer
areas there are -- so the blurrier and more jagged the image will become, as
you can see in the examples below.
| |
 |
 |
 |
 |
| Quality: |
100% |
90% |
80% |
70% |
| File size: |
6.27 K |
3.24 K |
2.29 K |
1.87 K |
| |
 |
 |
 |
 |
| Quality: |
60% |
50% |
40% |
30% |
| File size: |
1.66 K |
1.40 K |
1.28 K |
930 bytes |
As you can see, the amount of compression versus the file size is not a linear
scale. There is a significant savings between 100% and 70%, without a corresponding
loss of quality, but the size savings between 70% and 40% are not significant,
while the loss of quality is far greater. The size savings will also depend
on the dimensions of the image -- a large photograph can be compressed to 40%
or even less, because the areas of color are so much larger; while small photos
like the one I used above will show quality loss much faster. Some people even
suggest that images of less than 72 pixels in dimension should always be saved
as GIFs. However, I think the best method is to save in different formats until
you are satisfied with both the quality and the file size.
As for the problem of JPEGs not allowing transparancy, I usually get around
that by changing the background color of the image to match the background color
of the page. That way, I have a seamless edge around the image, but can still
save it in the smaller format. I used this quite a bit on my baby
crafts pages, because I quite like the look of it. One can also simply put
a border around the image, which sets it apart from the page, and this does
work nicely for many images.
The long and short of it:
While there are general rules to be followed -- line art and text should be
GIFs, photos and pictures with a lot of colors should be JPGs -- the best way
to get the smallest file size with the most appropriate quality is just to play
around with the image. Macromedia Fireworks and the newer Adobe Photoshop programs
all allow for this, so if you're in doubt, try a number of different settings
until you're happy with the results.
Links to more lengthy explanations:
http://www.askscott.com/scott/scholastic/GIFJPG.htm
http://www.pacificsites.com/~chrisk/graphics/b06mn40.htm
|
|
