Using Fastly Image Optimizer
To use the Fastly Image Optimizer (Fastly IO), enable the product directly in the Fastly control panel or via the API. Once enabled, Fastly IO will immediately begin transforming and serving images at the edge according to the default settings. You can configure the default settings to further customize how images are treated by Fastly. You can also test image transformations to see how they work before you change your image URLs.
Before you begin
Before you begin using Fastly IO, be sure to review the prerequisites and considerations.
Enabling and disabling Image Optimizer
Enable or disable Image Optimizer directly in the Fastly control panel using the steps below or via the API.
WARNING: Enabling or disabling Fastly IO on a service immediately impacts all service versions, including the active one.
Enabling Image Optimizer
To enable Fastly IO:
Log in to the Fastly control panel.
From the Home page, select the appropriate service. You can use the search box to search by ID, name, or domain.
Click Edit configuration and then select the option to clone the active version.
Click Image Optimizer.
From the Fallback location menu, select the geographic location closest to the origin where your images are stored. This will help determine the optimal shield location for any requests for Image Optimizer transformations that need to go back to an origin that doesn't have shielding enabled.
Click Enable Image Optimizer.
Click Enable on all versions to confirm you want to enable Fastly IO.
HINT: Click Don't show this again to disable the confirmation window.
Disabling Image Optimizer
To disable Fastly IO:
Log in to the Fastly control panel.
From the Home page, select the appropriate service. You can use the search box to search by ID, name, or domain.
Click Edit configuration and then select the option to clone the active version.
Click Image Optimizer.
Click Disable Image Optimizer.
Click Disable on all versions to confirm you want to disable Fastly IO.
HINT: Click Don't show this again to disable the confirmation window.
Testing Image Optimizer
Once you've enabled Fastly IO, you can test image transformations by adding query string parameters to a test URL so you can see exactly how they work before you change your image URLs.
Copy the URL provided in the Fastly control panel and paste it in a web browser followed by the image transformation you want to apply. Our Fastly IO documentation describes each of the available image transformations in detail and includes the exact pattern you can add to URLs, along with a description and example of how to use each parameter and its values.
Configuring default image settings
Fastly IO supports a variety of image formats and applies specific settings to all images by default. Use the Fastly control panel to review and adjust the default settings as appropriate. Changes to other image settings, including most image transformations, require using query string parameters.
To review and edit the default image settings via the control panel, follow the steps below:
Log in to the Fastly control panel.
From the Home page, select the appropriate service. You can use the search box to search by ID, name, or domain.
Click Edit configuration and then select the option to clone the active version.
Click Image Optimizer.
Click Edit settings.
In the Fallback location section, use the menu to select the geographic location closest to the origin where your images are stored.
In the WebP settings section, use the following settings to control how WebP images are treated by Fastly IO:
- From the Auto WebP field, select Yes to convert images to the WebP format in browsers that support it or No to use the image file type instead.
- In the Default WebP (lossy) quality field, enter the compression level for lossy file-formatted images. Fastly uses
85for the default quality but you can specify any whole number between1and100.
In the JPEG settings section, use the following settings to control how JPEG images are treated by Fastly IO:
- From the Default JPEG format field, select the JPEG type to use when delivering the image. By default, Fastly sets the JPEG type to Auto to deliver images with the output type matching the input type. You can also select Baseline to display the image line by line starting from top left and going to the bottom right, or Progressive to display a blurry image that becomes clear as it loads.
- In the Default JPEG quality field, enter the compression level for quality of lossy file formats. Fastly uses
85for the default quality but you can specify any whole number between1and100.
In the Resizing & scaling section, use the following settings to control how images are resized and scaled in Fastly IO:
- From the Resize filter field, select the image quality filter to use when resizing and generating new images to use a higher or lower number of pixels. By default, Fastly uses the Lanczos3 filter. You can also choose Lanczos2, Bicubic, Bilinear, and Nearest.
- From the Allow upscaling field, leave the settings at their default or select Yes to return images larger than the original source file so they can fit the requested dimensions.
In the GIF to video conversion section, use the Enable Animated GIF to Video field to indicate whether to enable animated GIF to video functionality. When set to Yes, each video frame is counted and charged as an image optimizer request.
Click the Advanced menu to adjust the File type and routing settings. By default, all files with PNG, JPG, JPEG, GIF, and WEBP extensions are processed via Fastly IO. Select Advanced if you're using custom VCL to specify the file types to be processed.
Click Save.
Activate your service.
What's next
Check out the Image Optimizer reference documentation to learn about the different parameters you can apply to transform your images.
NOTE:
This article describes a product that may use third-party cloud infrastructure to process or store content or requests for content. For more information, check out our cloud infrastructure security and compliance program.
