Choosing the right format

Editing images for the web is a compromise between displayed quality and file size. Saving images in the right format is the best way to optimize then and keep a balance between display quality and file size.

There are three common image formats used in the web: GIF, PNG, and JPEG. Every format is best suited for a kind of image and can easily be selected, just note:

  • JPEG is the most common format and optimal for photos.
  • PNG supports transparency and is best suited for graphics and clip arts.
  • GIF is the oldest format but is very popular because supports animations.

So, use JPEG for all your photos, PNG for your graphics or images with transparency, and GIF for animations.

Using the right image format is the first step for an optimal optimization of imagery in a website.

These three formats are supported by all browsers. In addition, there is the WebP format, which is only supported by Chrome browsers. As an advantage, this format can be used for all the image cases, because it is good compressing pictures, and supports transparency and animations.

Web image formats

Image formats can be divided between lossless and lossy attending to their compression method.

Lossless compression

With lossless compression the original and the optimized image are the same. This limits the file size reduction but does not introduce distortions. GIF and PNG formats use lossless compression.

donuts gif Donuts image in GIF format (29KB)

GIF is best suited for images that are very small and ones that use only a few colors, because of their limited color palette of 256 colors. It is very popular as animated format, supporting transparency.

PNG is a lossless compression file format with full transparency support developed to overpass GIF limitations. The 8-bit format makes a natural replacement for GIF and results in smaller file size, while the 24-bit and 32-bit variants offer an excellent alternative to JPEG (but with a larger file size). Use this format for simpler images and transparent images. It’s a good choice for storing clip arts, charts, logos, and text at a smaller size. The full transparency support makes PNG a natural option for many cases.

donuts png Donuts image in PNG format (13KB)

Lossy compression

While lossless compression does not discard information, lossy compression introduces some data lost to achieve a greater reduction in file size. JPEG and WebP formats use this kind of compression taking advantage from the fact that some image data are not perceptible by the human eye. Therefore, you can almost always reduce an image’s quality to a certain degree and the image will still appear identical to the original.

tiger jpeg Tiger image in JPEG format (78KB)

JPEG is the universal standard for displaying photos online (used on over 70% of websites worldwide). It is a lossy compressed file format that heavily optimizes photographs at size. It’s the best choice for images with a large range of colors and gradients. The one downside is its lack of support for transparency.

WebP is a new image standard proposed by Google that promises reductions of up to 25% in filesize. But is just supported natively in Chrome, so a universal adoption of that format remains some way off. WebP also supports many advanced features, such as transparencies and animations, and a lossless format similar to the PNG format. This lossless format is useful for rasterized vector graphics (e.g. logos), that might be visibly degraded in quality reusing the lossy format.

tiger webp Tiger image in WebP format (66KB)

Both formats introduce a quality factor (Q) to control the compression level. This causes degradation in image quality with lower values (ie. higher compression).

The JPEG format has noticeable artifacts in lower quality levels, especially if fine details or texts are involved. The WebP format has less noticeable artifacts but tends to generate a slightly blurry image in its lower quality settings.

Summary

While Chrome and Opera browsers natively support WebP, Firefox, Safary, and Internet Explorer do not. As a result, supporting WebP requires dynamically deciding whether to deliver WebP format or JPEG/PNG images according to the browser used by each of your visitors.

Use the JPEG lossy format to manage photos efficiently and the PNG lossless format to deliver graphics, icons and drawings, without having into account the client web browser.