What is Image Optimization?
Image optimization reduces image file size by selecting modern formats (WebP, AVIF), resizing to display dimensions, and tuning quality, improving page load speed and bandwidth usage.
Image optimization is the practice of reducing the byte size of digital images while preserving acceptable visual quality. It combines three core techniques: format selection, resizing, and quality tuning. Format selection replaces legacy formats like JPEG, PNG, and GIF with newer codecs such as WebP (developed by Google, 2010) and AVIF (based on the AV1 video codec, finalized 2019). These formats use more efficient compression algorithms, often achieving 25-50% smaller files than JPEG at equivalent perceptual quality. Resizing ensures images are no larger than their display size on the page, avoiding wasted bytes from downscaling in the browser. Quality tuning adjusts the compression level (for lossy formats) to balance file size and visual fidelity, typically using a scale of 0-100 where 80-85 is common for photographs.
The process can occur at build time (static optimization via tools like sharp, ImageMagick, or Squoosh) or dynamically at the edge via CDN image processing services (e.g., Cloudflare Images, Imgix, Cloudinary). Dynamic optimization uses HTTP content negotiation: the browser sends an Accept header indicating supported image formats, and the server or CDN serves the best available option. Responsive images using the HTML srcset attribute allow the browser to choose the most appropriate resolution, further reducing unnecessary bytes. Lazy loading (loading attribute or Intersection Observer) defers offscreen images, complementing optimization by reducing initial page weight.
Image optimization sits at the intersection of front-end performance, CDN capabilities, and media engineering. It directly impacts Largest Contentful Paint (LCP) and total page weight, which are key metrics for user experience and search engine ranking. CDNs often provide automatic optimization as a value-added feature, applying format selection and quality tuning without developer effort. However, careful tuning is required for images with text or sharp edges, where lossy compression can introduce artifacts.
Key facts
- WebP typically reduces file size by 25-35% compared to JPEG at similar quality.
- AVIF can achieve 50% smaller files than JPEG, with support for HDR and transparency.
- Resizing images to exact display dimensions avoids wasted bytes from browser downscaling.
- Quality tuning for lossy formats often uses a scale of 80-85 for a good size/quality tradeoff.
- CDN image optimization services can automate format selection via Accept header negotiation.
How it works in practice
Related terms
References
More in CDN & Performance
Apdex Score
The Apdex Score is a standardised metric that measures user satisfaction with application performance by comparing response times against predefined target and tolerable thresholds.
Bandwidth Throttling
Bandwidth throttling is the intentional reduction of data transfer speed by a network operator or service provider to manage congestion, enforce usage policies, or control costs.
Brotli Compression
Brotli is a lossless compression algorithm developed by Google, offering higher text compression ratios than gzip, used by CDNs to reduce page load times.
Cache Hit
A cache hit occurs when a requested resource is found in a CDN edge cache and served directly to the client, bypassing the origin server entirely.
Cache Invalidation
Cache invalidation is the explicit removal of stored web objects from a cache so that new requests must revalidate or refetch them from the origin server.
Cache Miss
A cache miss occurs when a requested resource is not found in a CDN or proxy cache, forcing the request to be forwarded to the origin server and then storing the response for future requests.
CDN
A CDN (Content Delivery Network) is a geographically distributed network of proxy servers and data centers that deliver web content to users from the nearest edge location, reducing latency and offloading origin servers.
Core Web Vitals
Core Web Vitals are a set of three real-world user experience metrics (LCP, INP, CLS) defined by Google to quantify loading, interactivity, and visual stability on web pages.
Cumulative Layout Shift
Cumulative Layout Shift (CLS) is a Core Web Vital metric that measures the sum of all unexpected layout shift scores during a page's lifespan, quantifying visual stability.
Edge Computing
Edge computing is a distributed computing model that processes data and runs application logic at Points of Presence (PoPs) close to end users, minimizing round-trip latency and bandwidth usage compared to centralized cloud regions.