Sep 022009

By using the proper file format for the images on your website, you ensure the highest quality image in the smallest possible file, which translates into better looking, faster loading pages.

For all practical purposes, when it comes to using images on a website, there are 3 file formats to choose from: JPG, GIF and PNG. While other useful formats are available, browser support usually requires the installation of additional software, a hurdle that is likely to limit your audience.

The primary consideration in determining which of these file types to use is the image’s content. Is the image composed primarily of solid or “block” colors such as a logo or text, or does the image have a wide variation of colors such a photograph? For images composed of mostly solid colors, use GIF or PNG. For full-color images, use JPG.

It’s about compression

I’ll keep the whys and what-fors on this brief. If you want to know more, there is a good link below.

GIF and PNG use LWZ compression which means that instead of saying something like “red pixel, red pixel, red pixel, red pixel, red pixel, red pixel, red pixel, green pixel, red pixel” it says “7 red pixels, green pixel, red pixel.” Further, LWZ compression is “lossless” which means that when you save an image in one of these formats, none of the information is lost.

JPEG compression on the other hand, is a “lossy” kind of compression which means that when you save an image to JPG, information is lost. It works by using algorithms to describe 8×8 pixel blocks, and it does so in a way that is designed to fool the eye. JPEG compression hides itself well when there is a lot of tonal variation, but if care is not taken, the blocks can become visible.

Show Me

Here are a couple of examples that demonstrate the use of GIF vs JPG.

In this first example, with solid colors and text, GIF (or PNG) are preferable. The size of a GIF pretty much determines itself, though some tuning can be done with color depth. To keep things simple, I set the gif’s color to the maximum of 256 colors. This gave me a file size of 11 KB. To get a similar file size in JPG, I set the JPG compression to an image quality of 80. At 12 KB, it is actually a little bigger than the GIF. Image quality speaks for itself.

block_color

11 KB GIF

block_color

12 KB JPG

With a photo, JPEG is preferable. While I set compression to an image quality of 80, just as I did with the solid color example, the compression is not easily discernible. If you look closely at the GIF version, you will see some degradation in quality. This is because of GIF’s 256 maximum color depth. Image quality aside, the JPG version is 25 KB in size while the GIF version is 64 KB.

full_color
25 KB JPG
full_color-80
64 KB GIF

What about PNG?

I focused on GIF and JPG as they are the most common formats used on the internet today. However, as browser PNG support has grown and become more robust, the use of this newer graphic file format has grown. While there is not yet an “official” way to do PNG animation as is possible with GIF, PNG is superior to GIF in other ways including greater possible color depth and the ability to implement alpha-transparency.

Transparency

There is one more thing that bears mentioning in this brief discussion: GIF and PNG both allow you to make parts of the image transparent. This is not possible with JPG images.

Some relevant links:

Posted by warren

Leave a Reply

(required)

(required)