- Fastly Status
Setting up image optimization
Last updated April 19, 2017
WARNING: Only send image content through the Fastly Image Optimizer service. We bill for this traffic at a different rate than what we charge for standard request traffic. Non-image content can't be optimized by this service and will cost you more.
To use the Fastly Image Optimizer complete these steps.
Contact Sales to request access
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.
- Log in to the Fastly web interface and click the Configure link.
- From the service menu, select the appropriate service.
- Click the Configuration button and then select Clone active. The service version page appears.
Click the Content tab. The Content page appears.
Click the Create header button. The Create a header page appears.
- 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
- In the Source field, type
- From the Ignore if set menu, select No.
- In the Priority field, type
- In the Name field, type
- Click Create to create the new header.
TIP: For more help with adding or modifying headers, see our guide.
Create a request condition
To ensure only your image assets are routed via the Fastly Image Optimizer, create a request condition.
- Click the Attach a condition link next to the
Fastly Image Optimizerheader. The Add a condition window appears.
Click the Create a new request condition button. The Create a new request condition window appears.
- Fill out the Create a new request condition window as follows:
- From the Type menu, select Request.
- 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
imagesdirectory via the Fastly Image Optimizer.
- Click the Save and apply to button to create the new condition for the header.
TIP: For more help using conditions, see our guide.
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
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