Offloading image optimization to a dedicated CDN

Image CDNs specialize in transforming, optimizing, and delivering images. They can be thought of as APIs for accessing and manipulating the images used on your site. A key practical benefit: switching to an image CDN has been shown to yield 40–80% savings in image file size. In most cases, they outperform build-time image optimization scripts.

Unlike build scripts, image CDNs generate new versions of images on demand. This makes them better suited for delivering variations that are customized to individual clients or specific page contexts.

How image CDN URLs encode optimization options

An image CDN URL conveys the image source plus the transformations and optimizations applied. Exact formats vary by vendor, but key features are common.

Image URLs typically consist of the following components: origin, image, security key, and transformations.
The basic parts of an image URL from an image CDN.

Origin

An image CDN can run on your own domain or on the CDN provider's domain. Third-party providers typically offer custom domain support for a fee. Using your own domain simplifies a future CDN migration, as your URLs will not need to change.

Image source

CDNs can often fetch the original image automatically from its existing location. This is typically accomplished by embedding the full URL of the existing image within the generated CDN URL. For example: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. That URL would fetch and optimize the target file.

The requested extension (JPG) may not match the delivered format (for example, WebP). The content-type HTTP header tells the browser the actual format. Be aware that this can cause confusion if a file is saved to disk and later processed by a program that relies on file extensions.

Uploading images to the CDN via an HTTP POST request is another widely supported method.

Security key

Security keys prevent unauthorized generation of image versions. If this feature is enabled, a valid key must accompany any request to create a transformed version. The CDN handles key generation and tracking automatically.

Transformations

Image CDNs expose dozens – sometimes hundreds – of transformations, specified in the URL. Multiple transformations can be combined without restriction. For page speed, the most valuable transformations are size, pixel density, format, and compression. These are the primary reason switching to an image CDN usually shrinks image payloads.

Because certain performance settings have an objectively optimal value, many CDNs provide an "auto" mode. Instead of explicitly requesting a format, the CDN selects the best one. Signals it might use include:

For example, the CDN might respond with AVIF for a Chrome user, WebP for Edge, and JPEG for a legacy browser. Auto modes are popular because they incorporate the CDN's optimization expertise without requiring code-level attention when new formats become available.

Self-managed vs. third-party CDNs

Two major deployment categories exist: self-managed and third-party-managed.

Self-managed

Self-managed CDNs suit sites with engineering staff able to run their own infrastructure.

Third-party

Third-party image CDNs provide image optimization as a managed service, available for a fee, typically on usage-based tiers with a free trial or free tier. Because the platform is maintained externally, getting started is usually fast, though a full migration for a large existing site may take considerably longer.

Selecting an image CDN

Many strong options exist, and any of them will help trim image bytes and thus improve load times. Beyond feature depth, the deciding factors are usually cost, support quality, documentation, and the ease of initial setup or migration from your current setup.

Largest Contentful Paint (LCP) considerations

Images strongly influence Largest Contentful Paint. If you adopt an image CDN, watch for these performance impacts:

  • Images from a CDN may be cross-origin, extending connection setup time. Whenever feasible, proxy the CDN through your primary origin to avoid adding extra connection targets. This effectively mimics self-hosting.
  • Set a fetchpriority attribute value of "high" on the LCP image element so the browser starts the download as soon as possible.
  • If the LCP image is not present in the initial HTML, use a rel=preload hint for the candidate image so it can load ahead of time.
  • If your origin proxy isn't an option and the browser cannot determine the needed image until late in the load, establish a connection to the cross-origin CDN early, shortening the resource loading phase for potential LCP images.