File Formats: GIF vs. JPEG

Raw graphics are too big to be quickly downloaded over the Web, so they must be compressed. All of your Web graphics must be compressed as either GIF (.gif) or JPEG (.jpg). Compressing your graphics doesn't reduce the image size (dimensions) of your graphics, it just reduces the file size.

Photographs and graphics with fields of color, and particularly colors that blend and fade into one another, are best served by JPEG.

prism.gif GIF compression 256 colors Image size: w129, h179 File size: 10.65kb	prism.jpg JPEG compression Quality 80, smoothing=2 Image size: w129, h179 File size: 5.08kb

We can use Fireworks to compare our options. Open your image in Fireworks, go to File-> Export and try different compression settings:

[controls on the bottom let you split the screen into 1, 2, or 4 views]

If, on the other hand, your image has flat color fields, it will compress well in the GIF format. Look at how much smaller the file prism2.gif is then the file prism2.jpg. Almost 11k!

prism2.gif GIF compression 256 colors Image size: w129, h124 File size: 2 kb	prism2.jpg JPEG compression Quality 5 Image size: w129, h124 File size: 5 kb

It takes more colors to describe a snapshot photo, like this one of a dog.

venus.gif GIF compression 128 colors Image size: w125, h139 File size: 10.72kb	venus.jpg JPEG compression Quality 5 Image size: w125, h139 File size: 5.56kb

Photos like this one compresses better as a JPEG (top view) with a file size of 5.56 Quality 84 and smoothing 2. The GIF (bottom view) is 10.72 k and although the image looks comparable, the files size is twice as big.

You have to learn to balance the trade-offs between the clearest images and the lowest file size. Fireworks help you to compare your options and optimizes the images for the lowest possible file size.