IMG Format Comparison

by Philip Greenspun for Web Tools Review
All of these images were produced in Adobe PhotoShop 3.0 on the Macintosh. They came off PhotoCD through the Kodak Color Management System transform (to RGB) and were then adjusted with Intellihance RGB Pro on automatic settings.

GIFs will be higher quality and may be smaller for compressing line art (e.g., maps, icons, etc.). If you want a transparent or "floating" graphic on a Web page, you also need to use GIF format.

Note: you must view this on a 24-bit color display to really appreciate the quality differences among the images.

In ancient times (1993), we would have used a GIF like this, 14.7K, which takes 8-10 seconds to load on a 14.4 modem

Switching to JPEG format (LOW quality) reduces the file to 7K, 4 seconds to load.

Reducing to Black and White before JPEGing results in a 6.25K file, barely 10% smaller and faster to load than the 24-bit color JPEG. This is a consequence of the fact that there is much more information in the luminance of an image than in the chroma.

A B&W GIF is 19.2K in size, surprisingly larger than the color GIF.

A somewhat larger in-line GIF, rather porky at 47.8K (30 seconds at 14.4).

JPEGing at the LOW quality setting results in a 16.6K file, one third the size.

JPEGing at the MED quality setting results in a 21.3K file, still less than half the size of the GIF.

A B&W LOW quality JPEG is 14.9K in size, again a savings of approximately 10% in size/time.

The B&W GIF is again huge, 68K.

Reader's Comments

where can I get more info on how to format images so my web site can look better (new user, sorry for the stupid ????)

-- Irka stross, March 26, 1999
The difference between JPEGs and GIFs is that JPEG compresses the image, but GIF compresses only the data. GIFs tend to be larger because they contain more information.

The GIF89a specification allows more than the 256 colors allowed by earlier GIF versions; but some programs (Photoshop 4 being one) limit their GIFs to 256 colors. This means that monochrome photographs have the same content after GIFing as they did in their original form, and that color photos COULD look just as good, but probably don't.

Light JPEG compression can yield an image which looks (almost) exactly like the original. I say "almost" because if you use a photographic editing program to "enlarge" the JPEG photo, you will find strangely-colored splotches, and squares (8 x 8 pixels), which probably make the enlarged picture essentially useless.

So you get the trade-off between picture fidelty and download time which Phil discusses on this page.

-- David Bessey, November 19, 1999

They say wavelet's the future of certain types of image compression, what do you think?

-- Li-fan Chen, January 22, 2000

I think that the points here are very accurate. They apply to photos or photographic type images only. Graphics that only have a few colors (IE less than 256) should use GIF compression. Images that regularly fall into this category are logos, text as graphics, basically anything that has distinct "areas" that are one color. The way GIF compression works is taking a line-by-line scan and removing the redundant data. So an image with horizontal strips (American Flag) could be a very small file while the same image turned 90 degrees could occupy 10 or 20 times as much space. Working in the corporate world, it is frustrating encountering people who only know half the truth, resulting in 2 color images being saved as .JPG and then the so called artist trying to reduce the file size by increasing the compression. Resulting in a blurred and spotted image that is STILL larger than the same image saved as a 16color or 8color gif. Anyway, that's my two cents on the subject.

-- Michael Boardman, January 27, 2000
Any image which needs to be edited in during more than one session should not be saved as a .jpg until the editing is complete. More and more image quality is lost each time a .jpg file is opened, edited, then saved.

Jim Harrington

-- James Harrington, October 2, 2000

This page compares GIF and JPEG, but all of the comments Philip makes regarding the GIF format hold true for the similar PNG format. PNG files are newer than GIFs and aren't as well supported by older web browsers, but all major modern browsers support them. The main reason you would want to switch is because PNG files are, in general, smaller. They also support much better transparency than GIFs, allowing some very nice effects.

For example, suppose that your page has a title at the top, with a blue background behind the title, and the rest of the page has a beige background. In your CSS file, you can specify that the background for the title is blue with a one pixel wide, 100 pixel tall PNG which has transparency varying from top to bottom, tiled along the x-axis. What do you get? You get a gradient background that has hardly any effect on the loading time of your page! And if someone opens your page in an older browser that doesn't support PNGs, no harm done: they'll see the plain green background if their browser isn't so old it doesn't support CSS.

Unfortunately for people trying to make entrance and exit tunnels, PNG doesn't support animation, so I'd say that its widespread adoption would be a good thing based on that alone.

-- Peter Scott, July 9, 2003

JPEG or GIF. It is funny but many programmers that write their own software does not know what format to use for screenshots. I run a big site about Total Commander, and if don't make a notice to my users they upload screenshots of thier software plugins in JPEG format not in GIF. It is a big mistake. Screenshots in GIF are usually much smaller and does not lose quality!

-- Andrey Pyasetskiy, May 12, 2004
Add a comment

Related Links

Add a link