Setting up image optimization

  Last updated August 21, 2017

To use the Fastly Image Optimizer complete these steps.

Contact Sales to request access

Contact sales to request access. Be sure to include the Service ID on which image optimization should be enabled.

Add the Fastly Image Optimizer header

Once image optimization has been activated on your service ID and confirmed via email, configure your service by adding the Fastly Image Optimizer header.

  1. Log in to the Fastly web interface and click the Configure link.
  2. From the service menu, select the appropriate service.
  3. Click the Configuration button and then select Clone active. The Domains page appears.
  4. Click the Content link. The Content page appears.

    the Content page

  5. Click the Create header button. The Create a header page appears.

    the create header window with the image optimization settings

  6. Fill out the Create a header window as follows:
    • In the Name field, type Fastly Image Optimizer.
    • From the Type menu, select Request, and from the Action menu, select Set.
    • In the Destination field, type http.x-fastly-imageopto-api.
    • In the Source field, type "fastly".
    • From the Ignore if set menu, select No.
    • In the Priority field, type 1.
  7. Click Create to create the new header.

Passing additional query string parameters

By default, the Fastly Image Optimizer removes any additional query string parameters that are not part of our image API. If, however your source image requires additional query string parameters to be delivered from origin then, in the Source field noted above, type "fastly; qp=*".

Create a request condition

To ensure only your image assets are routed via the Fastly Image Optimizer, create a request condition.

  1. Click the Attach a condition link next to the Fastly Image Optimizer header. The Add a condition window appears.
  2. Click the Create a new request condition button. The Create a new request condition window appears.

    the new request condition window with the image optimization settings

  3. Fill out the Create a new request condition window as follows:
    • In the Name field, type a descriptive name for the new condition (for example, Fastly Image Optimizer Request Condition).
    • In the Apply if field, type the appropriate request condition. For example, req.url.ext ~ "(?i)^(gif|png|jpg|jpeg|webp)$" will send all files with gif, png, jpg, jpeg, and webp extensions via the Fastly Image Optimizer. Likewise, req.url ~ "^/images/" will send all files in the images directory via the Fastly Image Optimizer.
  4. Click the Save and apply to button to create the new condition for the header.

Enable shielding

To reduce cache miss latency and ensure long-lived connections, you must enable shielding for your origin. The shield location should be as geographically close to your image's origin as possible.

Our guide to enabling shielding provides more information on how to set this up. Take special note of the step immediately following your shielding location selection in that guide. If the Host header for the service has been changed from the default, you must ensure the new hostname is added to the list of domains.

Confirm everything is working

Once you've activated your changes, check to see if the Fastly Image Optimizer is processing your image request by typing the following cURL command on the command line:

curl -o image.jpg http://www.fastly.io/image.jpg?width=200 && convert image.jpg -print "Image Width: %wpx\n" /dev/null

Replace http://www.fastly.io/image.jpg?width=200 with the full image URL and width of the image you're testing.

The command line output will display the image's width, which should match the width API parameter you added to your image. For example, the output might be:

Image Width: 200px

This article describes a product that may use third-party cloud infrastructure to process or store content or requests for content. For more information, see our cloud infrastructure security and compliance program.

Back to Top