Configure Edgio with ImageEngine

Edgio is a commonly used CDN with a rich feature set.

Edgio's caching policy

By default, Edgio has a standard cache policy. It includes the host, complete request URL (including query string), and the value of the accept-encoding request header.

Vary header is not honored.

This means that the ImageEngine directives can be used out of the box because the query string is included in Edgio's cache key.

General flow

The image request from the client first hits the CDN which has the ImageEngine delivery address configured as origin. Upon a cache miss, the CDN makes a request to its origin; ImageEngine. ImageEngine detects the proper optimization algorithm to use. If the image is not in the ImageEngine cache, ImageEngine fetches it from the (actual) origin. The response is cached with a cache key computed in the same way both on ImageEngine and the CDN.

The challenge for ImageEngine is to decide the best possible way to optimize an image while it is still cachable for the CDN in front.

To address this, ImageEngine works in a "default" mode and an "informed" mode.

Default mode

ImageEngine can detect the CDN making the request and based on that identify how the image can be optimized yet still compliant with the default caching strategy of the CDN.

Informed mode

Informed mode is when ImageEngine is informed that the CDN making the request has implemented ImageEngine support in a specific manner, ensuring that the cache key is computed the same way both in ImageEngine and in the CDN.

Default Mode

To be compliant with Edgio's default caching strategy, ImageEngine will only optimize images to the same format as it is at the origin. For example, if the origin is a PNG image, ImageEngile will optimize and serve a PNG image, even if the browser supports other/better formats. The reason for this is that the Accept header is not included in Edgio's cache key.

ImageEngine directives will work as expected.

Setting up Edgio CDN for ImageEngine

If you don't have an Edgio account already, follow Edgio's documentation to get started.

Once logged into your Edgio account, Click the "New Property" button from the overview page.

Next choose "Self Host Property" as your ImageEngine delivery address is an external origin.

Make sure to have your ImageEngine delivery address at hand when creating the property. You can give the property a name of your choice and enter your preferred hostname.

In the "Origin" section you must enter your ImageEngine delivery address in the "Override host header" and "Origin hostname" fields.

You can leave the rest as is.

In a few minutes, the new property connected to ImageEngine is up and running.

Custom Cache key

The next step is to create a custom cache key so that ImageEngine can optimize an image better at the same time as Edgio can cache it.

From the left-hand menu, click "Rules", then "Add rule" and "Add feature".

A panel appears to the right. Select the "Cache key" feature from the top dropdown list. Now, we can select which headers should be included in the cache key.

Add the following HTTP headers to the cache key:

• accept
• sec-ch-width
• width
• sec-ch-dpr
• dpr
• sec-ch-viewport-width
• viewport-width
• sec-ch-ect
• ect
• sec-ch-save-data
• save-data

If you prefer using the JSON editor, paste this JSON:

[
  {
    "caching": {
      "cache_key": {
        "include_headers": [
          "accept",
          "width",
          "viewport-width",
          "sec-ch-width",
          "save-data",
          "sec-ch-save-data",
          "sec-ch-viewport-width",
          "sec-ch-dpr",
          "dpr",
          "sec-ch-ect",
          "ect"
        ],
        "include_all_query_params": true
      }
    }
  }
]

The headers specified above are now a part of the cache key Edgio will use. Now, ImageEngine will also be able to optimize images better by converting them to the most optimal format, size, and compression.

Add request header

In order for ImageEngien to identify the proper optimization algorithm for this Edgio setup, a request header must be added.

Click the "Add" button from the rules page and select "Set Request Header".

Add the header imgeng-inputcdn with the value edgio,1.

Click "Apply" to save the Rule. Then the chance can be deployed to production. This takes a few seconds.

Conclusion

We've seen how ImageEngine can be utilized with Edgio. This setup has several benefits:

All* Edgio features available

In addition to serving the cached images from Edgio's fast and global CDN, other features such as WAF, DDOS protection, and statistics are available.

*) Do not enable Edgio's image optimization feature on top of ImageEngine.

Superior image optimization with Edgio

Using ImageEngine to optimize images rather than the built-in image optimization features Edgio offers, provides significantly better images. Lower byte size, faster transfer, and better visual quality.