Fastly image optimization

Last update: February 3, 2025

CREATED FOR:

  • Admin
  • Developer

Fastly image optimization (Fastly IO) provides real-time image manipulation and optimization to speed up image delivery and simplify maintenance of image source sets for responsive web applications. Once configured Fastly IO provides the following image optimization features:

  • Force lossy conversion
  • Deep image optimization
  • Adaptive pixel ratios
  • Support for common image formats: PNG, JPEG, GIF, and WebP

Before you enable and configure the Fastly IO option, you must set up your Fastly service and configure Origin shielding.

Based on your configuration settings, the Fastly Image Optimization (Fastly IO) snippet inserts the VCL code to perform the image optimization that speeds up product image delivery in the storefront. There are three steps to configure the Fastly IO: Enable, Configure, and Verify.

Enable Fastly IO

Enable Fastly image optimization (Fastly IO) from the Admin panel by uploading the Fastly IO VCL snippet. The snippet provides the Fastly configuration instructions to process all images through image optimizers, using default configurations.

Prerequisites:

To enable Fastly IO:

  1. Log in to your local Admin panel as an administrator.

  2. Select Stores > Settings > Configuration > Advanced > System.

  3. In the right pane, expand Full Page Cache.

  4. Select Fastly Configuration > Image Optimization to specify the configuration settings.

  5. In the Fastly IO snippet field, select Enable/Disable.

  6. Upload the Fastly IO snippet:

    • Select Default IO config options to open the Image optimization default config options page.
    • Select Upload to upload the VCL snippet to your server.

Configure Fastly IO

Review and update the default IO configuration settings for image optimization as needed. For example, you might want to change WebP and JPEG quality levels for lossy formats, or change the format for serving JPEG images to Progressive or Baseline. Also, you can use Fastly IO for more granular image optimization features, such as:

  • Force lossy conversion
  • Deep image optimization
  • Adaptive pixel ratios

To update Fastly IO:

  1. On the Fastly Configuration page in the Default IO config options field, select Configure.

    View the Fastly IO configuration settings

  2. Review and update the Fastly IO configuration settings on the Image optimization default config options page:

    Review Fastly IO configuration

    • Auto WebP?—leave the default setting (Yes) to convert images to the WebP format in browsers that support it. If you change the setting to No, Fastly uses the image file type instead of converting the image to WebP format.

    • Default WebP (lossy) quality—leave the default setting (85) or type the compression level for lossy file-formatted images. You can specify any whole number from 1 to 100.

    • Default JPEG format controls — leave the default setting (Auto), or select the JPEG type to use when serving an image. If the value is set to the Auto, Fastly delivers images with the output type matching the input type. Select Baseline to display images line by line starting from top left and going to the bottom right. Select Progressive to display a blurry image that becomes clear as it loads.

    • Default JPEG quality—leave the default setting (85) or type the compression level for quality of lossy file formats. Specify any whole number from 1 to 100.

    • Allow upscaling?—leave default setting (No), or select Yes to return images larger than the original source file so they can fit the requested dimensions.

    • Resize filter—leave the default setting (Lancsoz3), or select an alternative. This setting specifies the filter used to deliver a resized image. Depending on the filter selected, the resized image can have a higher or lower number of pixels.

      • Lanczos3 (default)—Delivers the best quality image. It increases the ability to detect edges and linear features within an image and uses sinc resampling to provide the best possible reconstruction.
      • Lanczos2—Uses same filter as Lancsoz3 but with a less accurate approximation of the sinc resampling function.
      • Bicubic—Has a natural sharpening effect when making an image smaller.
      • Bilinear—Has a natural smoothing effect when making an image larger.
      • Nearest—Has a natural pixelation effect when resizing pixel art.

  3. After you specify the IO configuration settings for the Fastly service, select Cancel to return to the Fastly configuration settings.

  4. In the Image Optimization configuration Enable deep image optimization field, select Yes to turn on deep image optimization.

    Enable Fastly IO deep image optimization

    Deep image optimization is off by default. When this feature is enabled, the built-in resizing feature in Adobe Commerce is turned off and resizing work is offloaded to the Fastly IO service. Image optimization only applies to product images. CMS images are not resized. See the Fastly documentation.

  5. After you enable deep image optimization, enable the adaptive pixel ratios feature to generate images optimized for use in responsive websites.

    Enable Fastly IO adaptive pixel ratios

    • In the Enable adaptive device pixel ratios field, select Yes.
    • In the Device pixel ratios field, accept the default setting, or select the System Input check box to remove the setting. Then, select the desired ratio. A higher Device Pixel Ratio setting delivers larger images.

  6. Select Save Configuration.