Should You Use JPEG, PNG Or GIF For Your Website Images?
Websites have been around for over 15 years. In that time it has developed from a mostly text based medium to one that provides full-featured applications. As it moved away from mostly text, more images were added to add color to the various pages.
As more images were added, several formats began to be supported by the various web browsers: JPEG, GIF, and PNG. PNG is the newest of the three, and up to a few years ago, wasn’t supported by many of the browsers.
One common questions with regards to displaying images on a web site is which image format should you use? Lets look at these three image formats and discuss the type of image that would be best suited for the format.
GIF (Graphics Interchange Format). This format was introduced by Compuserve in 1987. This format only supports a maximum of 256 colors, so it shouldn’t be used with images that should be photographic quality. If you do save digital photos with this format, you will cocomelon png notice a lot of banding (colors that don’t blend), because of the limited 256 color palette.
While it does display a limited number of colors, it can still be used for various images, such as screenshots or images that have few colors and well-defined lines. Saving a screenshot of a dialog box in the GIF format, will probably be smaller than saving the same image as a JPEG, even with maximum compression.
One other benefit of the GIF format is the ability to make a color transparent. This allows you to make small images, or icons, that seem to blend into the background of your web page.
JPEG (Joint Photographic Experts Group). Most people are familiar with this image format as all digital cameras can save digital photos into JPEG files. The first standard for the JPEG file format was issued in 1992 and was approved in 1994. Unlike the GIF format, JPEG files can display up to 16.7 million colors, which makes them perfect for displaying photographic images.
When a JPEG is saved, the amount of compression is specified. The more compression that is used, the smaller the file, but the lower the quality. JPEG uses a lossy compression, which means image information is discarded to reduce the file size. For displaying images on the web, you need to balance the quality of the image versus the size of the image. If you want great looking images, then you should use less compression. For printing, you should use the least amount of compression.
Since the JPEG file format is supported but all web browser and image editors, this format is perfect for displaying photo-quality images on your web pages.
PNG (Portable Network Graphics). This image format was introduced in 1996 as an alternative to both GIF and JPEG. This format is versatile in that it supports 256 (8-bit), 16.7 million (24-bit), and even higher 48-bit colors, however, there are trade offs to using this format.
Images that use the PNG format tend to be larger than either GIF or JPEG files. While PNG images can be compressed, much like the JPEG format, the compression used for PNG images is non-lossy. This means that no information is discarded to compress the image. This causes the PNG image to be much larger than the same JPEG image.
Another issue is that of browser support. While all new browsers support the PNG image format, visitors to your web site may be using an older browser (IE 6.0) that doesn’t support the PNG format 100%. The transparency may not be displayed properly in such a browser.
Besides the larger size, and browser support, the PNG format is becoming more popular, mainly because if the image quality. For small images, you can use the PNG format with very little size difference, but for larger photographic images, I would use the JPEG format.