The Difference Between GIF, JPEG and PNG

The JPEG format was created to be used with photos. The GIF and PNG are competing formats that support lossless data compression.

JPEG

The JPEG format is generally used in websites to display photos or realistic art that have a smooth transition between colors. Text, logos or modern cocomelon png art that has sharp color contrast create visible artifacts that don’t look visually appealing. JPEGs generally save photos at the highest quality in relation to file size.

Also, the JPEG format loses some data every time you save the image because it uses a lossy compression so it will lose some visual quality. The solution is to edit the file with a lossless compression system and only save the final image as a JPEG.

Note* Don’t resize JPEG’s either as this will create noticeable compression artifacts.

GIF

GIF’s is the other original major player in the web image format realm. GIFs are best suited for images that don’t require many colors as GIFs only support a limited 256 color palette. Logos, Banners and sprites are common uses of GIFs as they generally use a few solid colors.

GIFs have a lossless data compression system so it is useful for resizing images. It is generally a bad choice to use GIFs for photos as it requires the use of dithering (a method that creates colors not available in the 256 GIF colors by overlapping different colored pixels.) This makes for a gigantic file size when dealing with images that have lots of variants in color.

The other features that make GIFS popular are its transparency and animation features. GIFs are the only well supported format for animation and is still the most commonly used image format for transparent images.

PNG

The PNG format is a relatively new format that is now completely supported by almost all major browsers. PNGs directly compete with GIFs and is generally a better image format that uses less space and has alpha transparency channels that allow partial transparency in addition to the GIF’s full transparency. PNGs also are not limited to 256 colors. The only major advantage GIFs have over PNGs is animation capability.

Many designers shy away from the PNG format because others tell them that it is not supported by many older browsers including IE6 and below. This is only true for the alpha transparency feature. All the features offered by GIFs, including full transparency, are supported for the PNG on older browsers as well as newer ones. In addition, most older non-IE browsers have alpha transparency rendering capabilities and the latest Internet Explorer offers full support too.

Note* Honestly, I believe PNGs will replace GIFs as its features, compression efficiency, and color palette are all superior to the GIFs.

Leave a Reply

Your email address will not be published. Required fields are marked *