Sunday, October 7, 2007

JPEG, GIF and PNG: When to use what?

>
JPEG, GIF and PNG are all image file formats that provide a standardized method of organizing and storing image data. The file format most commonly seen is the JPEG. Almost all images and photographs are stored in the JPEG format. Even digital cameras use JPEG to save photos. Another image format that we see often in web pages is the GIF format. You must have noticed that the same web site sometimes contain both JPEG and GIF images. Why do they use different formats? Why not stick with one? Let's try to find out the reason and advantages of using different image file formats and learn when to use what.

Before we get to that, it's useful to know a little about the file formats. Those who are impatient can jump to the last section of the article, but I wouldn't recommend that.

JPEG: JPEG stands for Joint Photographic Experts Group, the name of the committee that created the standard. JPEG also known as JPG is designed keeping in mind the limitation of the human eye. The human eye has certain limitations, like it cannot distinguish between minute color changes, it is more sensitive to brightness change than to color change etc. The JPEG format exploit these limitation of the human eye by removing those color information from the image which we cannot see, thereby reducing the size of the image without any noticeable loss in quality, a technique known as compression. JPEG, however, is a lossy format which means that the image you get out of decompression isn't quite identical to what you originally put in. But the loss isn't perceivable to the human eye.

A very useful property of JPEG is that the degree of loss can be varied by adjusting the compression parameters. This means that the you can trade off file size against output image quality. The more the compression, the lesser the file size but poorer the result. JPEG uses 24 bits per pixel to store color information which means 16 million different colors can be represented. Hence JPEG works great with photographic images.

GIF: The Graphics Interchange Format (GIF) was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability. It is an 8 bit format which means the maximum number of colors supported by the format is only 256. But GIF is a lossless format, which means that as long as the colors in the image can be represented within 256 colors, there will be no loss in quality!! So GIF works great with images having limited colors like drawings and diagrams.

Two important features of GIF is the support for transparency and animation. The ability to animate images has made GIF the preferred format for banners and drawings adding life into web pages.

PNG: Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace the GIF format, as an image-file format not requiring a patent license. PNG is a great improvement over the GIF format because it uses 24 bits (palettes of 24-bit RGB colors) to store information. This means that it can save 16 million colors and that too is lossless giving superior image quality. It comes with a price though and that is a large file size.

When should I use JPEG and when should I stick with GIF or PNG?

If you have read the above, you must already know the answer. If not, then here is a quick review.

• JPEG works great with realistic images like photographs or scanned images. Any continuous variation in color will be represented more faithfully and in less space by JPEG than by GIF. GIF with a limitation of 256 colours cannot represent all the colors in a photograph.

• GIF works well with images having limited color like drawing, block diagram etc. Such images should be saved in GIF. If you take a screenshot of say a dialog box, then save them as GIF. Any image that has lots of text should be saved in GIF.

• Images that have a large area of a single color are compressed very efficiently by GIF. JPEG can't squeeze such data as much as GIF does without introducing visible defects.

• JPEG doesn't work well with images having straight lines and where there is abrupt changes in color. JPEG has a hard time with very sharp edges: a row of pure-black pixels adjacent to a row of pure-white pixels, for example. Sharp edges tend to come out blurred unless you use a very high quality setting. Edges this sharp are rare in scanned photographs, but are fairly common in GIF files: borders, overlaid text, etc.

• Computer-drawn images (ray-traced scenes, for instance) usually fall between photographs and cartoons in terms of complexity. The more complex and subtly rendered the image, the more likely that JPEG will do well on it. The same goes for semi-realistic artwork (fantasy drawings and such).

• PNG images always look great and they usually achieve very respectable compression ratios. PNG protects you from the reduction in image quality found with JPEG (and images with more than 256 colors saved to the GIF format) If you are saving images for printing use the PNG format.

• Thumbnail should usually be saved in GIF format. This is so because the image quality isn't much important as reduction in file size for easier image loading is.

References:
http://info.eps.surrey.ac.uk/FAQ/standards.html
http://www.sph.sc.edu/comd/rorden/graphics.html

2 comments:

  1. I'm very sorry, but I fear you're not fit to talk about GIF and PNG.

    You're only talking about PNG/24 (fullcolor), but the truth is that PNG also has PNG/8, an indexed version of the format that corresponds to GIF's use cases (and is in fact more powerful as it can handle partially transparent pixels).

    PNG/8 files (without partial transparency) exactly map to GIF files, and are of a lower size *every time* when the files are above a threshold of around 100-150 bytes

    And you didn't mention that PNG/24 also handled alpha (progressive) transparency.

    In the end, all 3 points of your conclusion where you suggest using GIF (2, 3, 7) should suggest using PNG instead.

    And finally, PNG is either palletized (with 24 or even 48 bits color) or fullcolor (24 bits/pixel, or 32 if you add transparency, or 48 or 64 if you're working with 16 bits colors), these are usually known as PNG/8 and PNG/24 (or PNG/32) formats, so your description of the PNG format is, well, also wrong.

    ReplyDelete
  2. To add to Masklinn's comments:

    You've also failed to mention IE6 and its crappy support of PNG files.

    ReplyDelete

Popular Posts