Should I use PNG, GIF, JPG, or other image types?

There are 3 main image types recommended for website building GIF, JPG, PNG

Let's look at each one and see their best uses and advantages.

GIF Format

The GIF format is possibly the most popular formats on the Internet. It is an excellent file type for compressing areas of images with large areas of the same color. The other major advantage is that it provides the only option for animated images. (outside of flash) The GIF89a format also supports transparency, and interlacing.

GIF images support a maximum of 256 colors, which makes them suitable for almost all graphics except photographs. The most common method of reducing the size of GIF files is to reduce the number of colors on the palette. It is important to note that GIF already uses the LZW compression scheme internally to make images as small as possible without losing any data.

Transparent GIFs

The GIF format also supports transparency. This is very usful for a number of reasons: Firstly you can isolate a gif image from its background colour and then make the background transparent. This means the image will sit 'on top' of another background colour and appear to be part of that composite image. Designers can use this feature to merge images together building them up in componants.


Interlacing

The interlacing feature in a GIF file makes it appear to load in the webpage faster. The image appears in the browser quickly, although its quality may be poor. As more data gets transferred, the image quality improves. It's important to note that interlaced GIF files will usually be a bit larger than non-interlaced ones, so use interlacing only when its more important to see the image quickly than see it later, but at full quality.

When to use GIFs

Often website buuilders use GIF images for logos, line drawings arears of large single colours and icons. They are not suitable for photographic images, and graphics which have areas of shading and require smoothly changing colours. When creating GIF files, avoid using gradients and turn off anti-aliasing where possible to minimize the file size.

The JPEG Format

The JPEG format supports 16.7 million colors and is primarily intended for photographic images where quality of tonality is important. However, there are drawbacks, the internal compression algorithm of the JPEG format actually loses information. This means that when you are working with JPGs, it's important not to compress or optimise the image untill you are ready for a final 'save'. The image quality can not be recovered once lost.

Progressive JPEG's

Any JPEG file can be saved as a Progressive JPEG. This is very similar to the interlaced GIF. As with GIF, this presents a low-quality image to your visitor when the page first loads, and over several passes improves the quality of it. Some graphic editing tools allow you to specify the number of passes before the image downloads completely.

When to use

As we have said, the JPEG format should be used on photographic images, and images that require more colour detail than the 256 colors limitation of GIFs.

The PNG format

There is a new player in the field called the PNG (pronounced Ping). PNG was developed to avoid the limitations of GIFs, it also avoids the licensing restrictions associated with GIFs . PNG was designed to offer the main features of the GIF format, but offer greater depth of color, for images up to 24 bit in color.

PNG format does not support progressive, interlacing or animation, so there are some downsides.

.ico files are used to store icons displayed in the "favorites" or "bookmarks" list of a web browser, if the user chooses to bookmark your web site.

.bmp is NOT appropriate for the web, ever.

This Q&A was found on XOOPS Web Application System : https://xoops.org/modules/smartfaq/faq.php?faqid=406