Featured | Simple Grafix

What is the difference between JPEG, GIF and PNG?

by admin on Nov.21, 2008, under Photoshop, Resources, Text Effects

I have seen this question asked over and over. Bottom line up front is if you are working with artwork that has a lot of colors you don’t want to lose stick with png, if you are dealing with photos jpeg is the way to go. If you want your page to load faster and don’t care if you lose some quality compress a jpeg or a gif and you’ll be fine.

I usually cringe when I see someone upload an uncompressed jpeg as the filesize is much larger than using a gif or png. What it boils down to is what are you trying to do? Below you will find the Tech speak and definitions on the different file types and lastly I put together some examples of what they look like.

JPEG is a standardized image compression mechanism. JPEG is designed for compressing either full-color (24 bit) or grey-scale digital images of “natural” (real-world) scenes. It works well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or black-and-white line drawings (files come out very large). JPEG handles only still images, but there is a related standard called MPEG for motion pictures.

JPEG is “lossy”, meaning that the image you get out of decompression isn’t quite identical to what you originally put in. The algorithm achieves much of its compression by exploiting known limitation of the human eye, notably the fact that small color details aren’t perceived as well as small details of light-and-dark. Most photographic images should be saved as JPEG as opposed to PNG for viewing on the web as the file size will be much smaller.

GIF images can only be saved as an 8-bit color mapped image, which means you are limited to 256 colors. There is one advantage that GIF has over PNG, and that is animation support. GIF files are popular for pictures with a limited number of colors. Items like clip-art, banners, icons and other navigational elements on your web page work best (and load faster) when they’re saved as a GIF file.

PNG (pronounced “ping”), the Portable Network Graphics format. It utilizes lossless compression, meaning no image data is lost when saving or viewing the image. PNG is mostly superior to GIF, as it has better compression, supports millions of colors, and is free of patent restrictions. PNG cannot be used for animation, but offers highly sophisticated transparency and color support, among other features. In most cases where animation is not required, it is best to use PNG instead of GIF.

The features we have discussed so far are probably enough to convert anyone into a PNG user. However, perhaps the best thing a PNG has to offer is what’s called the alpha channel. An alpha channel is one byte of extra data per pixel (or palette entry for 8-bit images) that represents the transparency level of a pixel. A PNG image with alpha is capable of 256 levels of transparency. What does all this mean? For one thing, you can antialias text and images so that sharp curves look good against any background. You can apply a true drop shadow which fades into the background. You can create images that take any shape or form. There are many possibilities with alpha transparency.