Fastly Image Optimizer (Fastly IO)¶
The Fastly Image Optimizer (Fastly IO) is an external service that provides real-time image optimisation for multiple input and output formats. It serves and caches image requests from your origin server, making your website faster and more efficient.
To be able to configure this feature, you need Fastly IO subscription.
To use Fastly Image Optimizer, you need shielding. To enable it, follow steps in Fastly documentation, Enabling and disabling shielding.
Before proceeding, make sure that you have the
snippet_re_enable_shielding.vcl configuration file added to your project:
1 2 3 4
You can add it using Fastly CLI:
Next, you need to choose the Shield location from the Shielding menu in Fastly web interface as specified in Fastly IO documentation.
To manipulate your Fastly VCL configuration directly from the command line, you need to:
- install Fastly CLI,
- set restrictions on the optimiser by using
1 2 3 4 5 6
This is an example VCL snippet uploaded by using the
Fastly passes requests through the image optimizer by adding the
x-fastly-imageopto-api header in
You need to restrict the optimizer by file path and extension to only apply to image requests:
1 2 3 4 5
You can define what image formats will be included, for example:
and which paths should be used as a source of images, for example:
For more configuration options, see Enabling image optimization.
After you save this snippet or create your own, you can upload it from the command line using:
Define SiteAccess for Fastly IO¶
Fastly IO configuration is SiteAccess aware.
You can define what handler should be used for a specific SiteAccess under
You need to set it up as
fastly, so Fastly IO can generate all image links.
By default, it is set as
alias, and it points to a built-in image optimizer.
You can also set up a custom handler if your setup requires it.
1 2 3 4
You can also use environmental variables to configure a specific handler for a SiteAccess.
See the example below to configure it with the
When you define image variation keys for Fastly IO, keep in mind that they should reflect variations in your original setup. The built-in image optimizer serves as backup to Fastly IO in case of misconfiguration, so it needs to be able to serve the same image variations.
Fastly IO image filters are not compatible with our built-in filters, so you will not be able to reflect your original filters accurately with Fastly. The script below will help you find replacement filters within Fastly configuration for the basic filters. For more optimization options on Fastly side, see Fastly IO reference.
To generate your original image configuration run:
Paste the configuration to
config/packages/ibexa.yaml to define the same variations for Fastly IO:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
You can select defined image variations during Content item creation in the image options. Variations can include different sizing options and other filters that are applied to the image.