Almost all websites today have images. Photographs, logos, icons, backgrounds, web pages are now saturated with graphical content. And while this can allow for some incredibly beautiful (and also some downright ugly) websites, the more images a page has to load, the more server calls an HTML script needs to make. Meaning slower load times and frustrated users. This series will focus on things you can do to tweak your images and make them load faster, and that starts with choosing the right file format.
JPEG, GIF, and PNG are the three most commonly used formats on the web. Each has strengths, weaknesses, and specific uses. Choosing the right format for the right job can have a dramatic effect on performance and quality.
JPEG
JPEG is usually the smallest format of the three. It accomplishes this by using a lossy compression algorithm to reduce the quality of the image every time it is saved, making JPEG a low quality, but very low size option. On graphical images, this compression can sometimes damage quality. For example, in images with sharp edges such as those with text in them, JPEG compression will create rippling “artifacts” around those edges.
JPEG compression is lossy, so it will often distort images around sharp lines. At small sizes, this is nearly unnoticeable.
For most cases the image may be too small to matter, but it’s something to be aware of. Increasing the quality of the image during saving will lessen this artifact, but it increases file size. Despite its low size JPEG is a 24-bit (or “truecolor”) format, so it can generate 16.8 million different color values. JPEG is best used for photographs and images with subtle gradients.
GIF
GIF images are 8-bit, so they only support a total of 256 colors. While this may seem like a huge difference compared to JPEGs 16.8 million, a 256 color pallet is usually good enough for the human eye and photos in GIF tend to hold up pretty well on small scales. Because they only store 8-bits per pixel, these images have the potential to be much smaller than JPEGs or PNGs, but only in images with little variation in color, such as graphics. Unlike JPEGs, GIFs support a transparency layer, so it is possible to place them over top of other images. They are also the only image format of the three to support animation, though animated GIF files tend to become very large very quickly.
GIFs are best used for graphics and images with lots of text.
PNG
PNGs support transparency, have a 24-bit color depth, and use a lossless compression algorithm. The best of both worlds from both JPEG and GIF. This means that PNGs have the greatest image quality of the three, but they also tend to have the largest file sizes, especially for photos. Use PNGs when quality is your highest priority, such as displaying original artwork in online portfolios, or when images need to have good looking feathered transparency.
Summary
For more information, and to see specific examples of each of these formats in action, click here: http://inobscuro.com/tutorials/optimizing-images-for-web-35/
There is no perfect image format. No one format is perfect for all uses. Each of the three major web image formats has different places where its compression algorithms excel. Using the right format to the right image will ensure your images stay as small as possible, making your pages faster to load.