Deep Dive - Part 1: Image Formats
In our previous entry, we got a glimpse into the capabilities of the Akamai Adaptive Image Compression (AIC) product, and how it can help in making the fastest sites on the Internet even faster. But how does fast delivery of images actually happen? In this two part deep dive, we will address:
- Initial decision points content developers need to keep in mind when evaluating image formats, and their image compression options
- The Adaptive Image Compression implementation process, and how to choose your compression settings
Image Formats and Content Developer Decisions
As we mentioned in our previous post, half a second can mean the difference between a user staying on your site or leaving, and in many cases, never returning. As web developers and content designers we need to do everything we can to ensure that does not happen. When it comes to images, selecting the appropriate image format is the first step in this process. There is no point in optimizing around compression if you've already failed to choose the correct image format. Not only do you run the risk of distorting the image, you will lose the trust of your content creator. Your job is to find the perfect balance between quality and performance.
Consider the below table as a reference to start making your image format decisions. There are three key questions you should ask when considering an image format:
Do you need support for animations?
Do you need transparency in your image?
Do you need to retain high quality or resolution in your image?
|
|
GIF |
JPEG |
PNG |
WebP |
JPEG XR |
JPEG 2000 |
|
Description |
The Graphics Interchange Format is a bitmap image format that was introduced by CompuServe in 1987. |
JPEG (seen most often with the .jpg or .jpeg filename extension) is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. |
Portable Network Graphics is a raster graphics file format that supports lossless data compression. |
WebP is a new image format that provides lossless and lossy compression for images on the web. |
Initially developed and patented by Microsoft under the name of HD Photo in 2006 -2007 |
Created by the Joint Photographic Experts Group in 2000. Intended to supersede the JPEG standard created in 1992 |
|
Color Range |
256 Colors, 8 Bit |
16.7 Million colors, 24 Bit RGB and CMYK |
16.7 Million colors , 8 Bit, 24 Bit RGB, or 32 Bit RGBA |
16.7 Million colors, 24 Bit RGB |
16.7 Million colors, up to 32 Bit RGB |
16.7 Million colors, up to 48 bit |
|
Animation |
Supported |
Not Supported |
Not Supported |
Supported |
Not Supported |
Not Supported |
|
Compression Algorithm Type |
Lossless* |
Lossy+ |
Lossless |
Lossy and Lossless |
Lossy and Lossless |
Lossy and Lossless # |
|
Transparency |
Supported, however no support for blending or gradient transition |
Not Supported |
Supported, in alpha channel allowing for blending and gradient transition |
Supported in alpha channel for both lossless and lossy |
Supported, in alpha channel allowing for blending and gradient transition |
Support in alpha channel for lossy and lossless |
|
Extension |
.gif |
.jpg .jpeg .jpe .jif .jfif .jfi |
.png |
.webp |
.jxr .hdp .wdp |
.jp2 .j2k .jpf .jpx .jpm .mh2 |
* Lossless compression - is a class of data compression algorithms that allow the original data to be perfectly reconstructed from the compressed data
+ Lossy compression - is a class of data compression algorithms that uses inexact approximations (or partial data discarding) for representing the encoded content. The data cannot be reconstructed.
# Lossy and lossless (JPEG 2000) - While JPEG 2000 supports lossless compression, it is not comparable in performance to other lossless capable formats.
As a rule of thumb, logos, line art, buttons and other web collateral are often best rendered as PNG or GIF. They both support image transparency, and typically a high amount of image fidelity is not needed. The deciding factor between the two comes down to whether you need support for animation. If animations are not required, choose PNG. When showcasing people, nature, product or anything where high resolution, image dimensionality, gradients, and quality are factors in the presentation, JPEG is your best bet. While JPEG is a lossy compression algorithm, it keeps performance in mind as the file sizes are typically less than PNG, making it optimal for delivery over the web.
A quick note: WebP (developed by Google) is an additional format that is also gaining traction. It aims to combine the best of both worlds incorporating the quality attributes of PNG while still supporting lossless compression capabilities that are meant for web delivery. Support for this new extension is still in its infancy, as Firefox and Safari do not currently support it. In addition, there are a number of new standards with JPEG 2000 and JPEG XR that continue to drive the image compression market. Each format is aiming to make the end user experience that much better, so be sure to stay tuned for more updates and for part two of our deep dive on implementation and settings.
Raphael Edwards is a senior technical project manager at Akamai.