Image Optimization

‍

Key Takeaways

• Automated & Intelligent: Speed Kit automatically optimizes images with a full suite of on-demand transformations at the edge, including format transcoding to AVIF/WebP and intelligent resizing, requiring no manual effort.
• Faster LCP without JavaScript Delays: By using a Service Worker to attach device metadata to requests, Speed Kit delivers near-pixel-perfect images without any client-side JavaScript, avoiding a key performance bottleneck and directly improving the Largest Contentful Paint (LCP).
• Quality & Control: Advanced compression preserves visual quality, while powerful controls like whitelisting and blacklisting allow the service to be fine-tuned for special use cases without any changes to your website's codebase.

Introduction

For modern e-commerce, high-quality images are non-negotiable, but they are also frequently the biggest cause of slow page loads. Large, unoptimized image files consume bandwidth, increase load times, and negatively impact key performance metrics like the Largest Contentful Paint (LCP). Speed Kit’s Image Optimization, powered by Fastly's advanced image optimization technology, is an automated, all-in-one solution designed to solve this fundamental conflict between visual richness and website performance. It moves beyond simple compression by integrating a multi-layered strategy that includes next-generation format conversion, intelligent resizing based on the end user's device, and a suite of on-demand image transformations. This system ensures every user receives a visually flawless image that is delivered in the smallest possible file size, tailored for their specific device and screen resolution. All optimizations are performed on-demand at the edge, meaning there is no need to pre-generate and store multiple versions of each image. The entire process is fully automated, removing the need for manual image editing and complex build processes.

Core Optimization Techniques

Speed Kit employs a series of automated techniques that work together to reduce image file sizes while preserving visual quality and ensuring high cache hit rates. Once the Speed Kit service worker is active after a user's initial page view, these processes are applied automatically at the edge to all whitelisted images.

Next-Generation Format Transcoding

The most significant impact on file size comes from converting images to modern, highly efficient formats. Speed Kit handles this conversion automatically based on browser support and image characteristics.

Supported Formats

• Process: Speed Kit automatically detects if a user's browser supports modern formats like AVIF or WebP. If it does, our service intercepts the original image request (e.g., for a JPEG, PNG, or GIF) and, on-the-fly, transcodes the image to the best-supported format in the backend. This new, much smaller image is then served to the user.
• Benefit: The AVIF and WebP formats offer superior compression and quality compared to older formats. On average, WebP provides a 30% file size reduction over JPEG, with AVIF offering even greater savings.

On-Demand Image Transformations

Beyond format conversion, Speed Kit can perform a wide range of real-time transformations on a single source image file. This eliminates the need for manual edits and reduces storage costs, as you only need to store one master version of each image.

Intelligent Resizing without Client-Side JavaScript

A primary challenge with responsive images is that most solutions require client-side JavaScript to determine the correct image size for the user's viewport. This creates a performance bottleneck: the browser must wait for JS to download and execute before it can even begin to request the most critical images, which significantly delays the Largest Contentful Paint (LCP). Speed Kit's "Fit-to-Layout" technology solves this problem by incorporating the client's layout information into the request without any client-side JavaScript dependency.

How It Works: Smart Bucketing at the Edge

Instead of creating a unique, dynamically sized image for every possible screen resolution (which would destroy cache efficiency), Speed Kit uses an intelligent bucketing strategy.

1. Layout Calculation via Service Worker: Speed Kit leverages its unique position within the browser to solve a key challenge. Normally, device information like screen width and Device Pixel Ratio (DPR)—which is needed for perfect resizing—is only accessible by executing JavaScript. Our Service Worker, however, intercepts image requests as the browser makes them. It intelligently attaches this critical device information to the request on the fly before it leaves the browser. This makes the client's layout context available to our transformation logic at the edge, where it is used to compute the largest possible image size that could be rendered.
2. Bucket Selection: At the edge, our transformation logic compares this required size against a series of predefined image width "buckets" (e.g., 360px, 480px, 720px, 1080px, etc.). It then selects the next larger bucket, ensuring the delivered image is near-pixel-perfect with no quality loss from upscaling.
3. Efficient Caching: This bucketing approach guarantees a high cache-hit ratio. To save on the high processing costs of the initial transformation, each image is transformed at most once for each width bucket. That transformed image is then distributed and cached across our entire global edge network.

The Performance Advantage: No JavaScript Delays

The most significant benefit of this architecture is its impact on render-blocking resources.

• Native Browser Loading: Because no preliminary JavaScript is needed, the browser can discover and request images using its native, highly optimized parser for <img> and <picture> tags. This allows native browser features like eager and lazy loading to function perfectly.
• Faster LCP: Unlike client-based frameworks that delay image requests until after JavaScript execution, Speed Kit's method allows the LCP image request to begin immediately. This directly shortens the LCP time, a critical factor for Core Web Vitals and user experience. Because the image source is not modified by client-side scripts, even native browser optimizations like <link rel="preload"> tags are fully supported and work seamlessly.

Additional Transformations

The following adjustments can also be applied on-demand to fine-tune image appearance and composition:

• Cropping and Trimming: Automatically remove whitespace or crop images to fit a specific aspect ratio or to a specific focal point.
• Quality Adjustment: Dynamically adjust the compression level (e.g., a quality level of 85 is often the default) to perfectly balance file size and visual fidelity.

Metadata Management

By default, to achieve the smallest possible file size, our service automatically strips non-essential metadata from images. This includes information like camera settings (EXIF), descriptive data, and color profiles.

Removing this data can significantly reduce the size of an image file without affecting its visual appearance. The color profile information is applied to the image before being removed to ensure colors are rendered correctly.

Activation & Integration

Speed Kit's Image Optimization is an opt-in feature designed for customers who do not already have a dedicated image optimization solution in place. While powerful, it is not activated by default, ensuring that it provides maximum value without interfering with existing workflows.

During the integration phase, our Product Integration team conducts a thorough analysis to determine if activating image optimization will provide a considerable performance benefit for your site. This evaluation considers your existing infrastructure and the potential uplift. If the feature is deemed beneficial, our team will activate it for you.

Advanced Features & Control

While Speed Kit's Image Optimization is designed to be fully automatic, it provides tools for fine-grained control and handles more advanced use cases.

Manual Controls

Through the Speed Kit Dashboard and Refresh API, you have full control and visibility over the image cache. The dashboard includes a Cache Explorer, which allows you to check exactly which images and other assets are currently held in the cache. If a source image is updated or needs to be removed, you can then trigger updates or purges directly from the dashboard or programmatically via our API, just as you would for HTML or other assets.

Controlling Optimization with Whitelisting & Blacklisting

Speed Kit provides granular control over which images are optimized. While the default behavior is to accelerate all images passing through our service, you can use either whitelisting or blacklisting to fine-tune this process.

• Whitelisting (Opt-In): This approach allows you to specify the only images or URL patterns that Speed Kit should optimize. All other images will be ignored and served directly from your origin. This method is useful when you only want to target a small, specific subset of your site's images for acceleration.
• Blacklisting (Opt-Out): This is the more common approach. You can add specific image URLs or URL patterns to a blacklist to exclude them from Speed Kit's optimization. This is ideal for preventing modification of sensitive images, such as pixel-perfect tracking images or specific brand assets that must remain untouched.

Scalability & Delivery

The image optimization pipeline is built on the same scalable infrastructure as the rest of Speed Kit, designed to handle massive product catalogs with millions of images.

• Edge Delivery: All transformations and optimizations are performed and cached at the network edge, close to your users. This reduces latency and origin server load, ensuring the fastest possible delivery.
• High Availability: Leveraging a global CDN, the service is resilient and ensures high availability, even during traffic spikes.