GIF, JPG, and PNG – Which should you use?
Gif Images
GIF images are primarily used when showing images that do not have a wide range of colors. A gif image only supports up to 256 unique colors. When saved, GIFs are relatively small files and therefore load faster. You should not use a GIF to show pictures or any images with a gradient. GIFs images are the only alternative to flash when you want to show a “moving” image. GIF images allow a transparency and an interlacing option.
When using the transparency of a GIF the GIF background will appear as the same color that it is placed on. Therefore placing a transparent background GIF in a red background div will turn the GIF background red.
Interlacing a GIF will make the image appear right away while it is being downloaded. The image will be blurry and continue to get less blurry until the full image is downloaded. Which it will then display crisp and sharp. GIF files that contain interlacing will be a larger file size then those without it. This means make sure you use it when appropriate or else you may be taking more time to show then image then just waiting for the server to download the full image and then display it.
JPG Images
A JPG image is primarily used for pictures and images with a gradient. A JPG image will show about 16.7 million colors. Only use JPG images when the image is a photo, a gradient image, or does not look good in a GIF format. JPG images allow an interlacing option called a progressive JPG. A progressive JPG acts like an interlacing GIF Do not use a JPG to display text because your text will blur in with the image and it will not look crisp.
Once a JPG file has been saved you can not retrieve the previous version of the image. Be sure to save an original file of the JPG if you ever want to make corrections.
PNG Images
PNG is the newest image format that the web offers. It was created to replace GIF images. It offers more color options then GIFs 256 capacity. However, PNGs should not be used for pictures. Though, PNGs can be a good image to use for gradients. The downfall to a PNG file is that not all browsers fully support everything a PNG file can do. However, in time this will probably change. PNG images do not support animated images.
Leave a Reply