Synopsis
This chapter describes how image and asset optimization works in a multi-CDN environment. It explains deterministic transform URLs, format negotiation with Accept and client hints, parity across vendor image engines, cache identity and validation, quality targets, rollout controls, and telemetry that proves user visible improvements without fragmenting caches or breaking links.
Scope and objectives
Many CDNs provide on the fly transforms for images and lightweight assets. Typical operations include resize, crop, format conversion, quality selection, and color space handling. Multi-CDN adds a requirement that identical requests produce identical bytes or at least identical perceptual quality, and that cache identity does not drift between providers. The objective is predictable output, stable cache behavior, and measurable gains in transfer size and rendering time.
Deterministic transform URLs
Determinism begins at the URL. A transform should be encoded in a canonical form that orders parameters, uses stable names, and avoids optional syntax variants. A single canonical form prevents multiple cache keys for the same intent. When a provider uses query parameters and another uses path segments, a translation layer can normalize to a shared canonical representation before requests reach vendor edges. Hashing the intent into a short token is acceptable when the mapping is stable and reproducible and when debugging tools can reveal the parameters behind the token.
Format negotiation and client hints
Modern optimization relies on the Accept header and the client hints family such as DPR, Width, and Viewport-Width. Negotiation must be explicit because uncontrolled variation expands cache keys and reduces hit rate. A practical pattern selects a primary format per device class and falls back based on Accept. For example, AVIF or WebP when offered, JPEG otherwise. Client hints should influence a small set of discrete sizes rather than a continuous range so that caches converge on a limited number of objects. Servers should declare Accept-CH for the hints in use and document how hints map to canonical sizes.
Engine parity and quality targets
Vendor image engines differ in encoder implementations and defaults. Parity requires explicit settings for quality, chroma subsampling, progressive behavior, and color management. Quality should be defined in terms of target bytes per pixel ranges and perceptual scores rather than raw encoder quality numbers because those numbers are not comparable across libraries. Color profiles should be normalized to sRGB for web delivery unless the application requires wide gamut. Animated formats such as animated PNG or animated WebP need special handling to avoid silent frame loss when formats change.
Cache identity and Vary rules
Cache identity should include only the parameters that truly change the bytes on the wire. If Accept is used to drive format selection, Vary on Accept is required. If client hints affect output, Vary must include the specific hints. Excessive Vary creates a large key space and fragments caches. A small, enumerated set of sizes and formats keeps the key space bounded. Validation headers ETag and Last-Modified must reflect the transformed object so that revalidation works independently of the original source file.
Responsive images and markup strategy
Responsive delivery depends on consistent srcset and sizes attributes or on picture elements with source types. The markup should reference deterministic URLs that map to the canonical transform set. When markup is generated server side, the generator should know the discrete sizes so that references align with cache keys. When markup is generated client side, the client must select from the same canonical set. Differences between providers should not be visible in markup because routing may change at any time.
Security and origin access
Transforms that accept arbitrary source URLs risk open proxy behavior and server side request forgery. A safe model serves only from a configured origin prefix and refuses external hosts. Signed URLs or signed cookies can bind transform requests to authorization policy when required. Hotlink protection is implemented at the edge but should not break legitimate embedding scenarios when the application expects cross origin references.
SVG, PDFs, and non raster assets
Vector formats behave differently from raster images. When optimization includes SVG sanitization, rules must be identical across providers or the output may diverge functionally. SVG compression and minification should not alter semantics. For PDF thumbnails or previews, the transform pipeline must control page selection and rendering density explicitly so that outputs match. Caching should separate rasterized previews from original documents.
Operations and rollout
Optimization changes should roll out in stages. A limited cohort proves whether byte savings translate into faster rendering without regressions. Staging requires routing that can pin a fraction of sessions to a policy while the rest continue with a baseline. Promotion occurs when RUM shows equal or better Largest Contentful Paint and image decode times across representative regions and networks. Rollback remains simple because canonical URLs persist and engines can revert to prior settings without changing links.
Telemetry and verification
Verification requires both lab tests and field data. Lab tests confirm byte size, format, and structural correctness across engines for a fixture set that covers transparency, animation, color profiles, metadata, and edge dimensions. Field data confirms real user timing and error rates segmented by device class, protocol, region, and ASN. Logs should record the canonical transform id, chosen format, output dimensions, and encoder path so that differences are visible when routes change providers.
Origin storage and pipeline
Static assets should be immutable and content addressed or versioned. The transform layer should treat the original as stable input and should cache transformed outputs aggressively. When storage locations change, canonical URLs must continue to resolve via shields or indirection so that caches remain valid. For large images and PDFs, byte range support at the shield reduces origin pressure during bursts.
Error handling and fallbacks
Not all clients support advanced formats. Negotiation must degrade gracefully to baseline formats without blocking rendering. When a transform fails due to unsupported input or an engine defect, the system should return a baseline format generated from the original using a conservative path and should log the fallback for later inspection. Error responses must not leak internal file paths or timing details that reveal infrastructure.
Interaction with other features
Image optimization interacts with security controls, cache consistency, and cost. WAF rules should allow the transform parameter patterns in use and block suspicious variants. Purge systems must understand that a single source asset fans out to many derivative objects. Cost models should account for transform CPU or GPU usage and for increased cache storage when canonical sets grow.
Compliance and data handling
Optimization pipelines sometimes read metadata such as EXIF. Privacy requirements may prohibit emitting location or device data. Stripping non essential metadata should be consistent across providers. Regional controls for where images are processed and stored may apply when optimization uses provider hosted compute.
Related chapters
For cache identity and purge behavior see /multicdn/cache-consistency/. For origin and shielding patterns see /multicdn/origin-architecture/. For routing effects that influence cache keys and formats see /multicdn/traffic-steering/.
Further reading
RFC 9110 and RFC 9111 define HTTP semantics and caching. Client Hints are defined by W3C and IETF drafts. Image format references for AVIF, WebP, and JPEG provide encoder guidance and interoperability notes.