Integrate ImageEngine with Amazon Cloudfront

CloudFront can be put in front of ImageEngine allowing CloudFront to cache the optimized image variants served by ImageEngine.

The use case typically is that images are served from the same domain or hostname as the website. Traffic can be split between ImageEngine and CloudFront using specific CloudFront behaviors. If the domain served by CloudFront will only be serving images, a single default behavior is required.

Setup

The setup requires some basic knowledge about how to configure Amazon CloudFront.

While setting it up, be careful not to create any request loops. For example, in the diagram above, one common mistake is to define www.foo.com as the origin for ImageEngine. This will create a loop. The correct origin for both CloudFront and ImageEngine should in this example be origin.foo.com.

To continue, an account with Amazon CloudFront and ImageEngine is required.

ImageEngine

If you already have set up an ImageEngine delivery address and connected it with an origin, you may skip this step.

1. Obtain your unique ImageEngine delivery address.
2. Configure this delivery address with the actual origin where your original images are located.
3. Verify the setup by accessing images like this: images.foo.com.imgeng.in/path/image.jpeg
4. images.foo.com.imgeng.in will be used in the CloudFront setup as the origin for images.

Amazon CloudFront

Log on to your AWS account. Then go to the CloudFront admin section.

Create ImageEngine Policies

ImageEngine needs a custom Cache Policy and Origin Request Policy.

In the left-hand menu, click “Policies”.

Cache Policy

1. Click “Create cache policy”

2. Configure the policy like in the screenshot:
   

   Take note of the Width, Viewport-Width, DPR, Accept and User-Agent headers.
3. Save the policy

Origin Request Policy

1. Click “Create origin request policy”

2. Configure the policy like in the screenshot:
   

   Take note of the Width, Viewport-Width, DPR, Accept and User-Agent headers.

3. Save the policy

Use the policies in a distribution

If needed, create a new CloudFront Distribution.

1. The origin of the distribution must be the ImageEngine delivery address
   

2. Add these origin custom headers:

   x-ie-proto: 1.002
   x-ie-upstream: CloudFront via Lambda
   

   
3. Configure Cache behavior according to the screenshot below. Make sure to select the ImageEngine cache policy and origin request policy created in the previous steps.
   
   Make sure to allow the OPTIONS method
4. Save the distribution

Split traffic

At this stage, we have a configuration that will pull all requests through ImageEngine. If you serve your entire website from CloudFront, you may want to split the traffic and only serve images from ImageEngine.

In order to do so, create additional behaviors with a “Path Pattern” matching the location of your images.

1. From the Distributions list, click the desired distribution

2. Click the Behaviors tab and “Create Behavior” button

3. Construct a Path Pattern that matches your image requests. You may have to create multiple behaviors. Add one pattern per image format, or simply use images/* if all images are in the “images” folder. Some suggestions for behaviors patterns:

   • *.jpg
   • *.jpeg
   • *.png
   • *.webp
   • *.gif
   • *.svg
     

4. Make sure to use the cache policy and origin request policy created specifically for ImageEngine in previous steps.

5. Click “Create” to save the behavior.