Configure Fastly with ImageEngine

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

Fastly's caching policy

Fastly is a CDN built with Varnish and much of the configuration is in VCL code.

However, thanks to Fastly's textbook implementation of the vary response header, Fastly is able to efficiently cache image variants based on all client hints supported by ImageEngine, including ect and save-data.

Further, URL parameters, like the ImageEngine directives, are included in the Fastly cache key by default.

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

Thanks to Fastly's friendly caching policy, ImageEngine and Fastly will function well together in default mode. In most cases, this is enough to make use of ImageEngine's powerful optimization features and still use Fastly for global caching.

Setting up Fastly CDN for ImageEngine

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

Once logged into your Fastly account, Click the "Add Service" button.

Give the service a name and a domain.

Next, add your ImageEngine delivery address in the "Add an origin" section:

The rest of the settings can be left in the default state. Click "Activate".

In a few minutes, the service will be up and running. 

ImageEngine will still work as usual with URL directives.

Upon image requests, ImageEngine will respond with the following request header names in the Vary response header. Fastly will automatically include the list of request headers in 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

Conclusion

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

All* Fastly features available

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

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

Superior image optimization with Fastly

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