The Fastly Image Optimizer manipulates and transforms your images in real time and caches optimized versions of them. When an image is requested from your origin server, the Fastly Image Optimizer can perform one or more transformation tasks before serving and caching the optimized version. For example, you can resize, adjust quality, crop and trim, serve responsive images, and more.
Setting up image optimization
Once we've enabled image optimization for your service, you can set up image optimization by following the steps in our guide to setting up image optimization. This is a four-step process:
Configuring basic image settings
The Fastly Image Optimizer supports a variety of image formats and applies specific settings to all images by default. Use the Fastly web interface to review and adjust the default settings as appropriate. See our instructions on reviewing and editing the default image settings for more information.
Using advanced image settings
To go beyond the basic image optimization and transformation settings in the Fastly web interface, you must change your existing image URLs by adding Fastly API query string parameters.
For example, if your image source existed at
http://www.example.com/image.jpg, you would need to add
?<PARAMETER=VALUE> to the end of the URL to create the proper query string structure for Fastly to transform the image.
You can change existing URLs in your source by adding one or more Fastly URL API query string parameters directly to your site’s HTML. You can also change them programmatically. For more information, see our section on changing image settings other than the defaults.
Using custom VCL with image optimization
If you're using custom VCL with the Fastly Image Optimizer, we recommend using the image optimization VCL boilerplate. This boilerplate is specially designed to work with image optimization. It also fixes several potential issues that can arise when using image optimization with our default VCL boilerplate.
Running into problems? See our section on image optimization debugging for more information.