Akamai Diversity

The Akamai Blog

Delivering High Performing Images on the Akamai Edge

 

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. 

 

Leave a comment