Skip to main content

Amplience Smart Images

The Amplience Smart Images feature will serve an image in the most appropriate format for the browser that requests it. All you need to do is add fmt=auto to the image URL and the image will be requested in the best format for the browser.

Amplience Smart Images simplifies your code, because you no longer have to write <picture> tags containing multiple formats for the same image. In the example below, the browser will process the code from the top until it gets to a supported image format.

<picture>
<source
type="image/webp"
srcset="
https://cdn.media.amplience.net/i/ampproduct/women-bright-colors?fmt=webp
"
/>
<source
type="image/jp2"
srcset="
https://cdn.media.amplience.net/i/ampproduct/women-bright-colors?fmt=jp2
"
/>
<source
type="image/jpg"
srcset="
https://cdn.media.amplience.net/i/ampproduct/women-bright-colors?fmt=jpg
"
/>
<img
src="https://cdn.media.amplience.net/i/ampproduct/women-bright-colors.jpg"
width="100%"
border="0"
alt=""
title=""
/>
</picture>

With Amplience Smart Images, you can just use the following:

<img
src="https://cdn.media.amplience.net/i/ampproduct/women-bright-colors?fmt=auto"
/>

Dynamic Media will select the image format as follows:

  • If the browser is Apple Safari then JP2 will be chosen as the format
  • If the browser supports WebP then that format will be chosen
  • If the browser cannot be detected then the image will be returned in JPEG format
  • If the original image contains transparency (i.e. any pixels that contain alpha channel information), then PNG format will be chosen in Apple Safari instead of JP2

Amplience Smart Images example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/women-bright-colors?fmt=auto

When requesting the image in Google Chrome it will be delivered in WebP format, as highlighted in the image below.

The image is returned in webp format in Google Chrome, Firefox and any other browser that supports that format.

When opened in Apple Safari, the image will be delivered as a JP2.

When opened in Apple Safari, the image is returned in jp2 format.

If the browser cannot be identified or does not support WebP or JP2, then the image will be returned in JPEG format. Here's a different image opened in a old version of Internet Explorer:

When the browser features cannot be determined, the image is returned as a jpeg.

Image quality settings
Link copied!

We have defined default quality settings for several image formats. These can be used by including qlt=default in the image URL. You can make use of per format quality settings even if you don't use fmt=auto.

Image quality is a value between 0 and 100 where 100 is the highest quality image with the lowest compression.

The default quality settings for each format that supports them is shown below:

Image formatDefault quality
jp240
webp80
jpeg75
png90

Using quality settings with Amplience Smart Images
Link copied!

In the following example, on Safari the image will delivered in JP2 format with a quality of 40, while when opened in Chrome, Firefox or other browsers that support WebP, the image would be delivered in WebP format with a quality of 80. If the browser type cannot be found, then the image is returned in JPEG format with quality of 75.

https://cdn.media.amplience.net/i/ampproduct/women-bright-colors?fmt=auto&qlt=default

Specifying quality settings for each supported format
Link copied!

You can specify your own values for each image format by specifying the format and the quality. For example: fmt.webp.qlt=90 specifies that if the image is delivered in WebP format, then the quality used is 90.

In the example below the image will be delivered with a quality of 40 if the image is delivered as WebP, but will use the default image quality if the image is delivered as a JP2 or JPEG.

https://cdn.media.amplience.net/i/ampproduct/women-bright-colors?fmt=auto&qlt=default&fmt.webp.qlt=40

You can add quality settings to you root template by contacting Amplience support. These will be used instead of the default quality settings when you specify qlt=default, but you can override them in the image URL. Quality settings can also be included in transformation templates.

Usage notes
Link copied!

  • To use fmt=auto it must be included in the image URL. It cannot be included in transformation templates or root templates.

  • If the original image contains transparency, then when using Safari, Amplience Smart Images will return the image in PNG format rather than JP2.

  • If you are testing Amplience Smart Images using developer tools within a browser (for example emulating Safari using Google Chrome developer tools), keep in mind that Dynamic Media will return an image based on the emulated browser. So if Chrome is emulating Safari and an image is requested using fmt=auto, Dynamic Media will return the image in JP2 format which Chrome cannot render.

Dynamic Media parameter reference