Fastly Image Optimization for Magento 2: Configuration Guide

What Is Fastly Image Optimization?

Fastly IO = a CDN edge service that compresses, resizes, and reformats images in real time as browsers request them. Reduces file sizes by 60 to 70 percent without visible quality loss.

Perfect for: Magento stores on Adobe Commerce Cloud, high traffic catalogs with thousands of product images, stores targeting sub 2.5 second LCP

Not ideal for: Stores with fewer than 50 products, sites not using Fastly as their CDN

Fastly Image Optimization processes images at the network edge rather than on your origin server. When a browser requests a product image, Fastly intercepts the request, applies compression and format conversion, then delivers the optimized version from the nearest edge node.

The service handles three core tasks:

1. Compression. Lossy conversion strips unnecessary data from images. A 2MB PNG becomes a 600KB WebP without visible quality degradation.

2. Format conversion. Fastly detects browser capabilities and serves the optimal format. Chrome and Firefox get WebP. Safari gets JPEG. Browsers supporting AVIF get even smaller files.

3. Responsive delivery. A single source image generates multiple resolutions through adaptive pixel ratios. The browser picks the right size via srcset attributes.

Once configured, Fastly caches every optimized variant across its global network. Subsequent requests for the same image skip optimization and serve direct from cache.

Why Image Optimization Matters for Magento Stores

Google's Core Web Vitals measure real user experience. The Largest Contentful Paint (LCP) metric tracks how fast your main content loads. Google considers anything under 2.5 seconds "good." Above 4 seconds fails.

Product images are the LCP element on most Magento category and product pages. Without optimization, a single hero image can push LCP past 4 seconds on mobile connections.

Real world impact:

Sites that use fetchpriority="high" on their LCP image pass Google's LCP threshold at much higher rates than those that do not. Combining priority hints with Fastly IO delivers the fastest results.

Stores that pass Core Web Vitals thresholds gain a ranking advantage in Google search results. Image optimization is the single highest impact change for LCP improvement.

Fastly IO vs Other Image Optimization Methods

Magento stores have four main approaches to image optimization. Each has tradeoffs.

Fastly IO processes images on every request based on the actual device. A desktop user gets a different optimized image than a mobile user from the same source file. No other method does this without custom development.

Native Magento resize generates fixed size variants during deployment. These serve the same file to every device. No WebP conversion. No adaptive sizing.

Magento extensions like Mageplaza, Amasty, or BSS Commerce handle WebP conversion and compression on the server. This works but adds server load and does not adapt per device.

Manual pre-upload optimization gives full control but scales poor. With 10,000+ product images, manual optimization becomes impractical.

For stores already on Fastly (including all Adobe Commerce Cloud deployments), Fastly IO is the clear choice. It delivers the best results with the least ongoing effort.

Fastly IO Features

Force Lossy Conversion

Lossy conversion strips unnecessary data from images to reduce file sizes. Fastly IO converts lossless formats (PNG, BMP, WebP lossless) to JPEG or WebP lossy format.

Results: 60 to 70 percent smaller files depending on quality settings.

When lossy conversion is active:

• PNG originals become JPEG or WebP
• Transparencies get replaced with a white background (or your theme's background color with deep image optimization enabled)
• Quality defaults to 85, adjustable from 1 to 100

When lossy conversion is disabled (WebP Auto = No), Fastly only converts JPEG to WebP for compatible browsers. PNG originals stay as PNG.

Deep Image Optimization

Deep image optimization shifts all image resizing from Magento to the Fastly IO service. This is off by default.

When enabled:

• Magento's built in resize stops running. Fastly handles everything.
• Only product images are processed. CMS images remain untouched.
• A background color from your theme settings applies to every image.
• WebP images switch from lossless to lossy compression.
• Alpha channels get stripped from PNG files.

The Fastly service adds parameters to image URLs: width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds. These tell the edge optimizer exact dimensions and quality targets.

Warning: Deep IO removes alpha channels and replaces transparency with your theme's background color (white by default). This causes visible artifacts on pages with non-white backgrounds, such as white borders around logos or product cutouts. Test with your actual catalog before enabling. If your store uses many transparent PNGs, either disable deep IO or pre-convert those images with the correct background color before upload.

Adaptive Pixel Ratios

Modern devices have pixel densities from 1x (standard displays) to 3x (flagship phones). Serving a 1x image on a 3x display looks blurry. Serving a 3x image on a 1x display wastes bandwidth.

Adaptive pixel ratios solve this by generating a srcset from a single source file:

<img src="product.jpg?width=240"
     srcset="product.jpg?width=240&dpr=1 1x,
             product.jpg?width=480&dpr=2 2x,
             product.jpg?width=720&dpr=3 3x"
     alt="Product Name">

The browser selects the correct resolution based on the device's pixel density. No extra source images needed.

This feature is critical for Progressive Web Applications (PWAs) where a single codebase serves every device form factor.

AVIF Format Support

AVIF delivers 40 to 80 percent smaller files than JPEG at equal visual quality. It surpasses WebP compression in most scenarios.

Fastly IO supports AVIF output with the IO Professional tier. Key details:

AVIF is the best format for product photography where color accuracy and small file sizes both matter. For stores with high resolution catalog images, AVIF often halves the file size compared to WebP.

Supported Image Formats

Fastly IO processes these input formats:

• JPEG (most product photos)
• PNG (logos, graphics with transparency)
• GIF (animated product demos)
• WebP (modern browsers)
• BMP (legacy formats)

Output formats depend on browser capability and your configuration. The auto setting detects the best format per request.

Prerequisites

Before enabling Fastly IO, verify three requirements:

1. Fastly Module Version

Install the Fastly CDN Module for Magento 2. The current version is 1.2.240 (March 2026). Earlier versions work but miss bugfixes and performance improvements. Minimum version for IO support is 1.2.62.

Check your current version:

composer show fastly/magento2 | grep version

2. Fastly Origin Shield

Configure Origin Shield to reduce origin requests. This acts as a buffer between your server and Fastly's edge nodes. Origin Shield is a standard part of managed Magento hosting configurations.

3. Fastly Backend Configuration

Your Fastly service must have the correct backend server configured. This ensures smooth communication between Magento and Fastly's edge network.

All three prerequisites come pre-configured on Adobe Commerce Cloud. Self-hosted Magento stores need manual setup through the Fastly control panel.

How to Enable Fastly IO

Step 1: Access Fastly Configuration

Log into your Magento Admin panel. Navigate to Stores > Settings > Configuration > Advanced > System.

Expand the Full Page Cache section in the right pane.

Step 2: Open Image Optimization Settings

Select Fastly Configuration > Image Optimization.

Step 3: Enable the IO Snippet

In the Fastly IO snippet field, select Enable/Disable to toggle the service.

Step 4: Upload the VCL Snippet

Click Default IO config options to open the configuration page. Select Upload to push the VCL snippet to your Fastly service.

This snippet instructs Fastly to process all image requests through the optimizer. Without it, images pass through unmodified.

Configuring Fastly Image Optimizer Settings

After enabling the IO snippet, configure the optimization parameters.

Step 1: Open Default Configuration

Navigate to the Fastly Configuration page. Find the Default IO config options field and click Configure.

Step 2: Adjust Optimization Settings

Quality setting guidance: 85 is the safe default. Dropping to 80 saves an extra 10 to 15 percent in file size with minimal visual impact on product photos. Go below 75 only for thumbnail grids where detail matters less.

Step 3: Enable Deep Image Optimization

In the Image Optimization configuration, set deep image optimization to Yes.

This offloads all product image resizing to Fastly. Your Magento server stops generating resize variants, freeing CPU and disk space.

Important: Deep image optimization applies only to product images. CMS content images remain handled by Magento.

Step 4: Enable Adaptive Pixel Ratios

Set Enable adaptive device pixel ratios to Yes.

Choose your target pixel ratios or select System Input for automatic detection. Most stores should support at least 1x and 2x. Add 3x if your audience uses flagship mobile devices.

Step 5: Save and Verify

Click Save Configuration to apply settings.

Verify the setup by loading a product page and inspecting image URLs. Optimized images include Fastly IO parameters in the URL (width, quality, format indicators).

Use your browser's developer tools Network tab to confirm images serve as WebP (or AVIF on IO Professional) with reduced file sizes.

Performance Optimization Tips

Beyond basic Fastly IO setup, these techniques maximize image performance:

Set fetchpriority on LCP images. Add fetchpriority="high" to your above the fold hero and product images. This tells the browser to prioritize these downloads.

Defer offscreen images. Use lazy loading for images below the fold. This reduces initial page weight and lets critical images load first.

Combine with full page cache. Fastly IO works alongside Varnish full page cache for maximum performance. Cached pages plus optimized images deliver sub-second load times.

Monitor with speed testing. Use PageSpeed Insights or WebPageTest to measure LCP before and after enabling Fastly IO. Track improvements over time.

Pre-optimize source images. Even with Fastly IO, upload the highest quality source possible. The optimizer produces better results from high quality inputs than from already compressed files.

Magento 2.4.8 Compatibility

Fastly IO works with the current Magento 2.4.8 stack (regular support until April 2028):

The Fastly module receives regular updates independent of Magento releases. Check the fastly/magento2 GitHub repository for the latest version.

Pros and Cons of Fastly Image Optimization

FAQ

What is Fastly Image Optimization in Magento 2?

Fastly IO is a CDN edge service that compresses, resizes, and converts product images in real time. It processes images on Fastly's network before delivering them to browsers. This reduces file sizes by 60 to 70 percent and improves page load speed.

Does Fastly IO support AVIF format?

Yes. Fastly IO supports AVIF output with the IO Professional tier. AVIF delivers 40 to 80 percent smaller files than JPEG. Maximum output resolution is 4,096 x 4,096 pixels. AVIF requires lossy compression only.

What Fastly module version do I need?

The current version is 1.2.240 (March 2026). The minimum version for IO support is 1.2.62. Always update to the latest version for bugfixes and performance improvements.

Does deep image optimization affect CMS images?

No. Deep image optimization processes product images only. CMS content images, category banners, and other non-product images remain handled by Magento's built in resize.

How much does Fastly IO reduce image file sizes?

Force lossy conversion reduces image sizes by 60 to 70 percent depending on quality settings and source image format. WebP conversion adds another 30 percent reduction over JPEG. AVIF reduces files by 40 to 80 percent compared to legacy formats.

Will Fastly IO affect image quality?

At the default quality setting of 85, visual differences are imperceptible for product photography. Lower quality settings (below 75) may show artifacts on high detail images. Always test with your actual product catalog before deploying to production.

Does Fastly IO work with Magento PWA Studio?

Yes. The adaptive pixel ratios feature generates srcset attributes designed for Progressive Web Applications. This delivers the correct resolution to every device from a single source image.

What happens if I disable Fastly IO?

Magento reverts to its built in image resize. Original source images serve without CDN optimization. Page load times increase and LCP scores degrade. No data is lost since source images remain untouched on your server.

Is Fastly IO included with Adobe Commerce Cloud?

Adobe Commerce Cloud includes Fastly CDN with basic IO features. The IO Professional tier (required for AVIF) may need a separate upgrade depending on your Cloud plan.

How do I verify Fastly IO is working?

Open a product page and inspect image URLs in your browser's Network tab. Optimized images show Fastly parameters (width, quality, format) in the URL. File sizes should be 60 to 70 percent smaller than originals. WebP format appears in the Content-Type response header for supported browsers.

Conclusion

Fastly Image Optimization transforms how your Magento store delivers product images. Instead of serving static, oversized files from your origin server, every image gets compressed and formatted for the requesting device at the CDN edge.

The setup takes under 30 minutes: enable the VCL snippet, configure quality settings, turn on deep optimization and adaptive pixel ratios. The result is 60 to 70 percent smaller images, faster LCP scores, and better Google rankings.

For stores running on managed Magento hosting, Fastly IO fits into a broader performance stack alongside Varnish caching, Redis session storage, and CloudFront distribution. Together, these components deliver the sub-second page loads that convert visitors into customers.