Best Practices with ImageEngine – ImageEngine

While there are no strict requirements on how to use ImageEngine, below is a list of best practices to get the most out of ImageEngine. In general, these best practices will address and improve many of the “Core Web Vitals” reported in many web performance audit tools.

Provide Origin images in high resolutions

If your publishing system or workflow supports it and based on the design of your page, origin images should be of higher resolution than are strictly needed. For example, if your design has a hero image with a display width of 1000 pixels (CSS pixels), ImageEngine will try to serve this image at 2000 pixels width for screens with a pixel ratio of 2. Because ImageEngine does not scale images up, the original image must be at least 2000 physical pixels wide in order to get the best possible quality. See also Client Hints.

Consider setting a long cache TTL in the engine settings

Generally, setting a longer cache TTL in the ImageEngine User-customizable Engine settings. This TTL decides how long the object will be stored by ImageEngine. The minimum allowed TTL is 3600 sec. It is recommended to use 7776000 (90 days) as cache TTL.
Longer TTL lengths reduce the cache misses and also traffic to the origin, ensuring better ImageEngine performance.

Use Auto mode

In most cases using ImageEngine without directives is the best option. Only use directives for specific cases or in combination with responsive images syntax. When you use directives, some, or all, of the built-in optimization logic may not be applied. For example, if you specify /f_avif/ all devices/browsers, even those not supporting AVIF, will be served a AVIF image.

Always define the display size of images

In your markup, you should always specify a display pixel size (width and height) in the image tags. Additionally, if you’ve implemented Responsive Images on your site, make sure to include the sizes attribute. Doing so will prevent unnecessary Cumulative Layout Shifts of the webpage.

In some cases, ImageEngine may return a bigger image than expected to cater to high DPI screens. If the design of the page expects a 400-pixel wide image and ImageEngine returns an 800-pixel wide image for devices with a pixel ratio of 2, the design may be broken if the markup does not define the display size of the image. Similar situations may occur when using Client Hints.

Use Responsive Images Syntax

See the article responsive images best practices article for details.

Summarized, the w_auto directive, and the sizes attribute is key. Here is an example:

<img src="//xyz.cdn.imgeng.in/image.jpeg?imgeng=w_auto,800" sizes="90vw">

In your responsive images markup, with or without client hints enabled, it may make sense to use ImageEngine URL parameters to request specific sizes of an image:

<img width="300" height="200" 
    src="https://try.cdn.imgeng.in/image.jpg?imgeng=/w_auto,300" alt="" 
    srcset="
        https://try.cdn.imgeng.in/image.jpg?imgeng=/w_auto,300 300w, 
        https://try.cdn.imgeng.in/image.jpg?imgeng=/w_auto,1024 1024w, 
        https://try.cdn.imgeng.in/image.jpg?imgeng=/w_auto,1920 1920w" 
   sizes="(max-width: 400px) 100vw, (max-width: 900px) 25vw, 300px">

Note: ImageEngine will still convert to the best image format whether it is webp, avif, jpeg2000 or something else.

Use Native Lazy Loading

Lazy loading if images might be a good idea, but should be used with caution.

As a rule of thumb; do not use a 3rd party JavaScript library to manage image loading.

The reason for this is that it breaks the built-in image loading features in the browser which may make image loading, especially above the fold slower both because the browser starts the download later and because the browser first has to execute the JavaScript

Images not visible on the initial screen or lower on the page, should of course be loaded lazy by adding the attribute `loading="lazy"` to the image tag:

<img src="xyz.cdn.imgeng.in/img.png" loading="lazy" alt="..." />

Images on top of the page should never be lazy loaded.

Use Priority hints

Priority Hints complement Resource Hints. They are useful for ensuring that specific important images are loaded as soon as possible, and are given priority over other, non-prioritized content. For example hero images or images visible on the screen when the user visits the website.

Priority hints are a markup-based signal (available through the fetchpriority attribute) that developers can use to indicate the relative priority of a particular resource.

<img src="xyz.cdn.imgeng.in/hero-image.png" fetchpriority="high">

Priority hints can also complement preload. Take a Largest Contentful Paint image, which, when preloaded, will still get a low priority. If it is pushed back by other early low-priority resources, using Priority Hints can still help how soon the image gets loaded.

Please refer to this document for more information and in-depth discussion of the usage of priority hints: https://web.dev/priority-hints/

Use Resource Hints

Resource Hints will speed up the connection to ImageEngine by telling the browser as early as possible to connect to the ImageEngine server. This way, the browser will have the connection open when it is needed later.
Preconnect helps warm up connections to cross-origin servers and can help improve metrics like Time-to-first-byte and is useful when you know an origin but not necessarily the exact URL of a resource that will be needed. For specific content where the URL is known, use Priority Hints Resource hints are enabled in the <head> section of your markup like this:

<link rel="preconnect" href="//xyz.cdn.imgeng.in">

Or alternatively in the HTTP response headers of your web server like this:

Link: <//xyz.cdn.imgeng.in>; rel=preconnect

Opt-in to Client Hints

Client Hints enable the browser to send more detailed information about what size the image should be, relative to the viewport size, actual display size, screen resolution, and network quality.

To enable Client Hints for your site you’ll have to explicitly enable it by adding the below <meta> tag to your <head> element:

<meta http-equiv="delegate-ch" 
 content="sec-ch-dpr https://xyz.cdn.imgeng.in; 
  sec-ch-width https://xyz.cdn.imgeng.in; 
  sec-ch-viewport-width https://xyz.cdn.imgeng.in; 
  ect https://xyz.cdn.imgeng.in;">

or adding an HTTP header in the server response:

Accept-CH: sec-ch-viewport-width, sec-ch-width, sec-ch-dpr, ect

When the response from the webserver to the browser contains this header, the browser will send the requested client hints on all subsequent requests as permission policies allows.

However, to enable the browser to send client hints to 3rd party locations like the ImageEngine delivery address, for example, images.foo.com or xyz.cdn.imgeng.in, your server must also delegate access to the selected client hints to the ImageEngine delivery address. This is done using Permission Policies. This is yet another response HTTP header looks like this assuming the ImageEngine delivery address is images.foo.com:

permissions-policy:
ch-viewport-width=("xyz.cdn.imgeng.in"),
ch-width=("https://xyz.cdn.imgeng.in"),
ch-dpr=("https://xyz.cdn.imgeng.in"),
ch-ect=("https://images.foo.com")

Note that the permissions policy does not have the `sec-` prefix.

Using client hints and ImageEngine with responsive images will generate a perfectly sized and optimized image.

However, note that the sec-ch-width header is only sent if the browser is able to determine the intended display size of the image. Hence, you must provide a sizes attribute to the image tags.

It is OK to “retrofit” responsive images by copying the value of any width attribute (px) to the sizes attribute: <img sizes="100px" width="100">.

ImageEngine will only return Content-DPR when sec-ch-width header is present in the request. If the origin image is smaller than the intended display size, Content-DPR will be < 0 because ImageEngine does not scale images larger than the original size.

Here is an example implementation.

You can ead more about client hints here. For more details, please read this article on Client Hints, Responsive Images and ImageEngine.

Optimize your engine

Even if "Auto Mode" is generally recommended, there are optimizations that will have great effect on many sites. The advanced settings will help you both launch ImageEngine on a high traffic site, but also tuning the image optimization process.

Set maximum DPR

A generally recommended setting is to limit the maximum Device Pixel Ratio (DPR) that should be considered when resizing images, especially if the origin images generally have higher resolution.

For most sites, the recommended cap for DPR is 2. The human eye can rarely spot a difference in high-resolution displays beyond that.

On the advanced settings page, click the "Image Size and Quality" section and find the "Maximum Device Pixel Ratio" section. Apply it like any other setting.

Use an official ImageEngine Plugin

Many of the best practices above are implemented by the official ImageEngine plugins.

For example, if your site runs on WordPress, Shopware, or Magento, you should consider using a plugin rather than manually implementing the best practices.