Image Formats: A Comparison

Below is a comparison of JPEG and Gif compression a continuous tone (photographic) image and a flat-color image.

jpeg high gif 256

Left: JPEG high quality (5.2k). Right: gif 256 colors (15.8k).

jpeg low gif 16

Left: JPEG low (1.6K). Right: gif 16 colors (5.0k).

Check the differences in image quality and image size. With the continuous tone image above, JPEG beats Gif every time. The images look better, and weigh in at less.

jpeg high 2 gif 256 2

Left: JPEG high (3.6k). Right: gif 256 colors (1.5k)

jpeg low 2 gif 16 2

Left: JPEG low (1.8K). Right: gif 16 colors (1.5k)

Looking at this set of flat-color images, the Gif wins. Even the higher setting on JPEG shows artifacts (look at the left edge of the red square in the second from bottom row), and it’s twice the file size.

The New(ish) Format: PNG

As something of a response to GIF, it being proprietary, the PNG, or Portable Network Graphic was developed. Here’s a quote from their site:

“For the Web, PNG really has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). PNG also compresses better than GIF in almost every case, but the difference is generally only around 5% to 25%, not a large enough factor to encourage folks to switch on that basis alone. One GIF feature that PNG does not try to reproduce is multiple-image support, especially animations; PNG was and is intended to be a single-image format only.” - Intro to PNG Features

PNG works. That 5-25% mentioned in the quote above is enough for me. Here’s a couple of comparisons:

horizontal stripes: GIF horizontal stripes: PNG

Left: GIF, 438 bytes. Right: PNG, 239 bytes. The PNG size is 54% of the GIF.

vertical stripe: GIF vertical stripe: PNG

Left: GIF, 1.412K. Right: PNG, 265 bytes. Here the GIF is over 5 × larger.

Notice also how PNG handles the vertical stripes better than GIF. GIF compression works in a linear, horizontal fashion, so the same stripes rotated from horizontal to vertical increase the GIF size over three-fold. With the PNG, the increase is slight, around 10%.

These are just simple comparisons, but they do point out a very important point when imaging for the web. You need to try different methods of compression, and at different settings. Often you can save lots of size, which translates to download time. And always remember that with the web, you only need as good as you need. Good enough is good enough.