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

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.

The image is returned in webp format in Google Chrome, Firefox and any other browser that supports that format.
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.
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.
When the browser features cannot be determined, the image is returned as a jpeg.

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.

  • Note that Amplience Smart Images is optimized for photographic images, so we don't recommend using it on images with any transparency or multiple layers. This is to ensure that the JP2 encoder produces good results.

Dynamic Media parameter reference

results matching ""

    No results matching ""