Configure Cloudfront with ImageEngine – ImageEngine

Cloudfront is a commonly used CDN with a rich feature set. However, Cloudfront does not have built-in image optimization.

Cloudfront's caching policy

For images, Cloudfront has an aggressive default cache policy based on the request-URL. Moreover, Vary header is not honored.

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

When ImageEngine detects that Cloudfront is in front, ImageEngine will only optimize the image to its original format and not perform any resizing. This is because Cloudfront only considers the request URL in its cache key algorithm by default.

ImageEngine will still work as usual with URL directives.

Informed Mode with Custom Cache Policies

To enable ImageEngine to perform format conversion, resizing, and conditional compression, the cache key on the Cloudfront side must be customized. This is achieved by configuring a custom cache policy.

Additionally, ImageEngine needs to know which optimization strategy can be applied. This is achieved with a custom origin policy

Creating the distribution

Enter your ImageEngine delivery address as the "Origin domain":

Next, add the imgeng-inputcdn header with the value cloudfront,1. This is an important step as this header informs ImageEngine about which image optimization strategy to apply.

Scroll down to the "Cache key and origin requests" section. In this section both an Origin Request Policy and Cache Policy must be added.

ImageEngine Compatible Cache Policy

Click "Create new origin request policy". Give the policy a descriptive name.

In the "Cache key settings" section, choose "Include the following headers" from the drop-down list.

Add the following headers so that they are included in the cache key:

sec-ch-width
sec-ch-dpr
sec-ch-viewport-width
accept
ect
save-data
cloudfront-is-tablet-viewer
cloudfront-is-mobile-viewer
cloudfront-is-desktop-viewer
imgeng-audit

Also, make sure to include the query string in the cache key by selecting "All" under "Query strings".

To save the policy hit the "Create" button.

ImageEngine Compatible Origin Request Policy

Click "Create new origin request policy". Give the policy a descriptive name.

Under "Query strings" make sure to select "All". This will make sure the distribution works with ImageEngine url directives.

To save the policy hit the "Create" button.

The additional settings on the distribution are optional and can be configured to your needs. To create the distribution click the "Create distribution" button.

Now, the distribution is listed on the dashboard. You can review or edit the policies under the "Behaviour" tab on the selected distribution.

Conclusion

We've seen how ImageEngine can be used together with Cloudfront to enable image otpimization in your Cloudfront distributions. This setup has several benefits:

All Cloudfront features available

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

Superior image optimization with Cloudfront

Cloudfront doesn't have built in image optimization. Using ImageEngine is a much better alternative than creating and maintaining a Lambda function both from a cost and maintenance perspective.