Understanding Different Image FormatsWritten by: Haily | This article will teach you the differences among the most popular image formats and will help you choose the right format the next time you save an image.

CompuServe GIF (.gif)
When saving an image as a GIF image, an index of only 256 colors is saved with the image. What this means is that each pixel of the image uses a color from the image's indexed color information. This compression method isn't nearly as efficient as the JPEG image format, but unlike the JPEG format, GIF image's can recognize transparency as one of the 256 colors. If you're seeking to produce an image that uses transparent pixels, then this is the format for you. But small images, buttons, banners, etc., when saved as GIFs, are much smaller in file size than JPEGs. If you got a small image, your best chance is saving it as a GIF.
If your image contains a lot colors, shades, and/or tints (gradients), then saving in the GIF format will produce a mild grain effect, however. Most often, and with small web images, this effect isn't much of a problem or a nuisance, but with larger images where picture quality is much more desired, then JPEG would be preferred as this effect isn't as visual in JPEG.
What sets GIF apart from JPEG and PNG images, however, is the ability to produce animations. Design software that utilizes animation, will save the animation as an optimized GIF.
JPEG (.jpg, .jpeg)
The JPEG image compression method is the most efficient compression method of the image format in this article. JPEG images compress their color information with a pattern similar to scientific notation. For example, a JPEG image that has color X running side by side for 100 pixels would compress this image to X^100 rather than XXXXXX... (x100). There are several benefits in this compression method. One, the reduction in image quality is difficult to perceive at 100% with the human eye, unlike the GIF format. Two, you can control the level of compression for this format to find the right balance between file size and image quality. But why seek low image file size? Why not save in full quality all the time? Well, regardless of whether your images are uploaded to your own website/server or if you use an image host, seeking low file size is a must. The larger your file sizes, the longer it takes for your images to load.
While all of this sounds great that you may want to use JPEG for everything you do, please note that JPEG offers no type of transparency at all. Plus, GIF surpasses JPEG when the image is small enough.
PNG (.png)
PNG images use a compression method that favors quality over file size. You would like to choose PNG images when the image isn't too large in dimensions but when high quality is preferred. PNG images, although, aren't as popular as GIF and JPEG images due to the larger file sizes it tends to (but not always) produce. For large images, such as photographs or desktop wallpapers, JPEG is the preferred format as very little quality (at 100% zoom) is lost.
PNG images have their own claim to fame as well. Like GIF images, PNG (at 8-bit) recognizes transparent pixels. But when set to 24-bit, PNG images can recognize pixels partially transparent. This is a feature that can serve much potential in building a website, but many older browsers as recent as Internet Explorer 6 can have trouble displaying partially transparent pixels and simply display the default background color. Internet Explorer is the most popular web browser in the world, with millions of users still at IE 6. As unfortunate as it is, if you plan to use PNG-24 images with partial transparency to a large audience, then there is practically a guarantee that you will have viewers who cannot view the full desired image. But it depends on how you utilize this feature. Simply do not use the effects in such a way that it is necessary for the image to be partially transparent in places.
Choosing the Correct Format
The JPEG format is usually the preferred image format on the web for images in general. But depending on the design software you use and the JPEG compression options it offers to you, you may want to experiment whether it would be more efficient to use JPEG as opposed to GIF. What I prefer about using JPEG is that you can scale down the quality pretty far down from the maximum level before you start seeing much visual change to the pixels. GIF images however can surpass JPEG images in certain circumstances. The reason why the GIF format is so popular in the internet today is that small images saved as GIFs are much smaller than small JPEG images. Websites use GIF very often as they tend to have many small images, buttons, and banners throughout their pages.
Now what about PNG? PNG is a reliable format for saving the full and original quality of your designs or images, but medium to large to extra-large PNG images run much higher on file size than do GIFs and JPEGs. Images for use in the internet aren't always recommended to be saved in PNG mainly because of the fact that JPEG images can compress image quality while making it less perceivable to the human eye, which in the end is what your image is built for.
But this is considering that your image isn't transparent and isn't an animation. Once you make an animation, your only choice (today) is GIF regardless of the quality you want for your final image. PNG-24 is still an option even though not everyone can view partially transparent pixels. You can always just tell your visitors to get with the times! Plus, JPEG format is a must if your image is a photograph. If you download pictures from a digital camera you may notice they already come in JPEG format. Well, there's a good reason for that, so you better not change it! Large images like photographs are at best saved at JPEG. In the end, it's all about file size, isn't it?

   

| Written by: Haily | Added: Jul 14 2009 | Last Modified: Dec 21 2009 | Views: 1,652 | (Log in to rate) |

Member Comments