Support | Learning Center | Web Information

GIF, JPG & PNG

The three most common image file formats on the web are GIF, JPG and PNG. The first two have been a standard in web browsers since the beginning. The third one, PNG, is not really a new format in and of itself, but it is a newcomer to web graphics and until recently was only supported in web browsers through the use of proprietary plug-ins.


GIF - An acronym for Graphics Interchange Format, created originally in 1987 by CompuServe to facilitate the exchange of images between different platforms. The file format is known for its compression and the fact that it can store and display multiple images. The major drawback to GIF is that images can only use up to 256 distinct colors to display their data. For photographic-quality images, this is a significant obstacle. Fortunately, the GIF file format contains a small work-around: the file itself can have a color palette that each stored image uses in addition to the local palettes created for colors custom to those specific images. This means that most images stored as GIFs have access to potentially more than the 256 colors technically allowed by GIF.

However, the GIF file format is still not the best medium with which to display your family photos on the web. Where GIF excels is in storing and compressing text-based images, line and clip art. Because these types of images don't require millions of colors, they can quite easily be stored as GIFs with minimal, if any at all, degradation.

Finally, one of the more popular uses of the GIF file format is that of animation. Built-in natively to the format are controls for image delay, layer transparency, and layer position, among others (layer here refers to each distinct image contained within the file). By cleverly utilizing these features, people on the Web have created some truly astounding animations using GIF Animator.

       


JPG - Developed by the Joint Photographic Experts Group, this file format is the Internet standard for presenting photo realistic images. It has the capability to compress large images down to very small file sizes while retaining the overall photographic quality of the image. JPEG files can use any number of colors up, so it's a very convenient format for 24-bit images (True Color, which supports more than 16 million colors).

Unfortunately, the one characteristic of JPG files that makes them great for the Internet is also its greatest drawback. The more you compress an image, the more information that is lost. That means that high quality photos become blurry, indistinct, and down-right un-view able at the highest levels of compression. Therefore, when saving files as JPEGs it's absolutely critical that you maintain a careful balance between compression and quality.

When choosing to save a file, sometimes it can be difficult deciding on which format would best serve your purposes. The rule of thumb is this: if your image is text-based, or contains mostly clipart, line art, or other drawings, then you should save it in the GIF format; however, if your image contains mostly photo-realistic information, your best bet is JPG.


PNG - This is the lost brother in Internet file formats. Originally the Portable Network Graphics format was developed by Thomas Boutell, Tom Lane, et al as a replacement format for both GIF and JPEG - it natively supports all the characteristics of both formats, and then some, but it seems to have been forgotten in the push to make web browsers bigger, better, and more burly. Only recently have browsers begun supporting this format without the need for special proprietary plug-ins.

As mentioned above, the greatest advantage to using PNG is that it supports all the features of both GIF and JPEG. If you have text or line art, you can activate the GIF-like color reduction options and create a smaller file with no lossy compression. On the other hand, if you're saving photo-realistic images you can activate the JPEG-like compression schemes and save them that way, also with no loss during compression (unlike JPEG which varies from near-lossless to extremely lossy). In addition to these features, it also supports alpha channels for masking, gamma for color correction, and storing 48-bit color images (JPEG can only go as high as 24-bit).

However, there is a drawback to all this: PNG files tend to generally be larger than JPEG files as they almost always use a lossless compression scheme. (Though often times when used with the same color palettes as GIF files they tend to be smaller.) Additionally, while modern browsers do natively support this format, they don't necessarily support all of its functionality. Finally, PNG does not support animation, perhaps the only feature it does not share with GIF.

If you decide to go with PNG, you may find the results are not always what you expect.

 


A PNG file compressed down to 27kbs.


A PNG with a transparent outer edge. If your browser does not display this image then you have an older browser. If the outer area appears gray, then you are using Internet Explorer, as it does not support transparent PNGs.

Back to General Web Info