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

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.

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

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:

Image quality settings

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 format	Default quality
jp2	40
webp	80
jpeg	75
png	90

Using quality settings with Amplience Smart Images

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

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

• 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.

Related pages

Dynamic Media parameter reference