Image Formats
An image format typically chains together various lossy + lossless algorithms to grant compression savings. There’s multiple formats adopted by web browsers, each with different features and performance tradeoffs. To be clear, there’s not a “one size fits all” format for the web (currently). Different types of images should be encoded into different formats depending on what type of image it is, what the browser supports, and what needs the page has.
There’s typically three decisions that go into the choice of an image format for a web developer.
- Does it need transparency?
- Does it need animation?
- Does it need high quality data?
|
'Lena' is a common image used in the evaluation and comparision of image compression algorithms. |
PNG is a simple format that supports transparency and lossless compression. It allows you to define an alpha channel for your image, to mask out transparent areas, as well as an option to enable a lossless Deflate compressor on the data. (Deflate is a combination of two lossless compressors, LZ77, and Huffman). Because compression is lossless, image quality remains identical to the source image, this causes issues however, in that the file sizes tend to be quite bloated, and not as small as they could be.
GIF is another format which supports transparency, alongside animation (which is the direct reason for the whole ‘cats on the internet’ thing..). The GIF format contains two stages of compression, a lossy palletization step (restricting the entire image to only 256 colors) followed by a lossless LZW compressor. The process of quantizing the colors of the image down to only 256 provides an aggressive quality reduction at the benefit of better compression sizes, which tends to produce better compression from the LZW end of things.
Colt McAnlis says: Most modern, cutting edge compressors make the largest wins by chaining together multiple coding steps. A single stage can modify the data stream such that subsequent stages can compress it better than the raw data stream alone. Popular encoders, like 7zipchain together LZ dictionary encoding, that produces a reduced set of symbols that can be consumed more efficiently by a Markov Chain algorithm.Or, for example, you can apply a lossless compression algorithm on top of an existing, GPU formatted lossy format to encode the data even further. The biggest wins come from combining algorithms in the right ways.
If you don’t need transparency, or animation, then JPG is the best format for you. It was generally designed to handle the compression of high-quality photo data, but provides a configurable set of Lossy compression options, allowing you to trade off compression quality vs. image size as your application needs it.
If you’re looking for more of a ‘one stop shop’ for your image format, then WebPshould be on your radar. The format boasts not only superior compression quality/size, but also transparency and animations as well. It uses both a lossy and lossless compressor combination, and much like JPG, will allow you to define your quality level vs. file size. Of course, this new image format hasn't been adopted across all browsers just yet, so web developers who’ve adopted it are currently in the early phases of working through usability issues. Although a 30% savings over JPG, alongside increased server-side adoption prove that WebP is a dominant format for any sites dealing with image bloat problems.
| Compression | Lossless | Lossy | Transparency | Animation |
PNG | Good | Yes | No | Full | No |
GIF | OK | Yes | Yes | Binary | Yes |
JPG | Good | Yes | Yes | No | No |
WebP | Great | Yes | Yes | Full | Yes |
Figure 3 - Feature set for specific browser supported formats
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
Lossy WebP compression uses predictive coding to encode an image, the same method used by the VP8 video codec to compress keyframes in videos. Predictive coding uses the values in neighboring blocks of pixels to predict the values in a block, and then encodes only the difference.
