Progressive Images

Most of images on the web take the form of baseline JPEGS that build up slowly from top to bottom as the page is loaded. These baseline images can take a long time to load fully and are often the last resources to load on a page. Progressive JPEGs offer the more graceful approach of first loading a low-resolution version of the image as a placeholder, and then progressively increasing the quality of the image as the resource is loaded.

On this page we'll explain how you can make use of progressive images in Dynamic Media.

Comparison of Baseline vs. Progressive Images

A baseline image builds up like this:

In contrast, a progressive image builds up from low to high quality in several passes. Like this:

Progressive Image Use Cases

Progressive images may be preferable to baseline images in the following use cases:

Use Case #1: Web Pages with Many Images

When baseline images are used, web pages containing many images can show a lot of white space initially. A better browsing experience can be achieved by displaying low quality (but progressively improving) placeholder images initially.

Use Case #2: Mobile Devices

The use of progressive JPEG images is particularly relevant in the context of mobile devices that have low bandwidth 3G connections in poor signal areas.

Use Case #3: High Resolution Images

Even with good bandwidth, very high resolution images can still take some time to load--especially if there are many of them.

Combined use case

Having considered the three non-exclusive scenarios detailed above, now consider the combination of web pages containing multiple high-resolution images being downloaded simultaneously to mobile devices over slow internet connections. This is the sweet spot for the use of progressive JPEG images.

Implementing Progressive Images

This is a Dynamic Media feature that requires the image to be published from Content Hub. Load the required image into Content Hub and publish it, then add the following parameter to the published image URL in order to format it as a progressive image:

fmt=jpg&fmt.jpeg.interlaced=true

In this example, the fmt=jpg parameter is not actually required if the base image is already of JPEG type, but is required to convert another image format such as PNG to JPEG.

The fmt.jpeg.interlaced=true parameter is the command instructing the Dynamic Media service to serve up the image as a progressive image file. It will be ignored if the image format does not support progressive interlacing.

Normal JPEG Example 

https://cdn.media.amplience.net/i/support/Tiger1?fmt=jpg](https://cdn.media.amplience.net/i/support/Tiger1?fmt=jpg&fmt.options=interlaced

Progressive JPEG Example

https://cdn.media.amplience.net/i/support/Tiger1?fmt=jpg&fmt.jpeg.interlaced=true

Browser Support

Progressive JPEGs are compatible with all major browsers.