Why image optimization matters

Images dominate the modern web. According to the HTTP Archive, images account for 51% of bytes loaded on the median page. That makes them the single biggest lever for improving page speed. Poorly optimized images cause slow renders, frustrating layout shifts, and higher bounce rates—especially on image-heavy e-commerce pages where every extra second has a direct cost.

Since August 2021, Google has factored page experience into search rankings via Core Web Vitals. Three metrics matter: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Images directly influence LCP and CLS, and both can be measured in the field with Real User Monitoring tools or in a lab environment with automated testing.

Optimizing images on the web
BLOG-639 Embedded Image - YjGVJT

The four levers for faster images

Dimensions

Delivering images at the right size is the highest-impact optimization. Modern phone cameras capture enormous files—the Samsung Galaxy S21 Ultra, for instance, shoots 12,000 by 9,000 pixel photos from its 108 MP sensor. A typical phone screen is only 1440 pixels wide, so a large fraction of those pixels are never displayed. Shipping them anyway wastes bandwidth and egress, and on slower connections can take minutes to load.

Two approaches keep image dimensions in check. The first is responsive markup using srcset and sizes attributes, which have been supported by all modern browsers since 2017:

<img srcset="hello_world_1500.jpg 1500w,
             hello_world_2000.jpg 2000w,
             hello_world_12000.jpg 12000w"
     sizes="(max-width: 1500px) 1500px,
            (max-width: 2000px) 2000px,
            12000px"
     src="hello_world_12000.jpg"
     alt="Hello, world!" />

This code offers the browser three variants with different intrinsic widths. The browser then picks the best match based on viewport conditions in the sizes attribute. A picture element with source children works similarly.

The second approach—Client Hints—moves the decision to the server. Some browsers attach headers like Viewport-Width (currently being renamed Sec-CH-Viewport-Width) when requesting images:

Viewport-Width: 1440

The server can then return a downsized variant even when the HTML markup is simple and unchanged:

<img src="hello_world_12000.jpg" alt="Hello, world!" />

Either way, matching image dimensions to what the device can actually display cuts both server load and visitor waiting time.

Format

Modern formats offer substantial compression gains. AVIF, the newest with widespread support, is typically 50% smaller than comparable JPEGs, while WebP achieves around 30% reduction. AVIF also supports alpha-channel transparency and animations. Google Chrome already supports it, Firefox 93 added stable support on October 5, 2021, and further adoption is expected from Edge and Safari through the Alliance for Open Media.

Even where formats haven't changed, clever encoding helps. BlurHash embeds a tiny color representation of an image in HTML as an immediate placeholder. Progressive JPEGs instead order bytes by detail level, so low-quality versions appear first and sharpen as more data arrives—a smoother experience than top-to-bottom scans.

At the top, a normal JPEG loading from top-to-bottom at three points (13% complete, 30% complete and 50% complete). At the bottom, a progressive JPEG loading with incrementally more detail at the same three points (13% complete, 30% complete and 50% complete).

Quality

JPEG is lossy; WebP and AVIF support both lossy and lossless modes. For most sites, lossy compression is the right trade-off: the visual difference is minor, and the bandwidth savings are worth it. Choosing the right quality setting is a balance. Aggressive compression introduces visible artifacts, while overly conservative settings leave files needlessly large. Tools like Butteraugli and SSIM model human perception of quality, but the process is hard to fully automate. In practice, around 85% quality in most compression libraries works well as a default.

Markup

Reducing bytes improves LCP, but CLS requires telling the browser image dimensions before it renders the page. Without them, the browser reserves zero pixels for an image, then redraws when dimensions arrive in the header bytes. That causes jarring layout shifts.

Include height and width attributes in markup so the browser can allocate space early. When using responsive width selectors, declaring the original dimensions lets the browser calculate correct height automatically if the aspect ratio stays constant.

<img height="9000"
     width="12000"
     srcset="hello_world_1500.jpg 1500w,
             hello_world_2000.jpg 2000w,
             hello_world_12000.jpg 12000w"
     sizes="(max-width: 1500px) 1500px,
            (max-width: 2000px) 2000px,
            12000px"
     src="hello_world_12000.jpg"
     alt="Hello, world!" />

Lazy-loading also reduces initial work: set the loading attribute to lazy to defer off-screen images until the user scrolls near them. This helps pages with image grids feel faster immediately. All major browsers except Safari support lazy loading—Safari keeps it behind an experimental flag.

<img loading="lazy" … />

The hosting factor

Where images live matters as much as how they're encoded. Hosting every image on a different domain forces the browser to perform separate DNS lookups, TCP connections, and TLS handshakes for each one. Co-locating images on the same first-party domain—ideally with the page itself—lets the browser reuse a single connection and load subsequent images much faster.

Automating the audit

Cloudflare's Image Optimization Testing Tool automates the process of applying these principles. It takes a page URL and runs automated tests to identify potential image improvements, using WebPageTest and Lighthouse to calculate Core Web Vitals on both the original page and a version with automatic optimizations applied. Those optimizations—format, quality, and dimension changes—are performed through a Cloudflare Worker with Image Resizing. Results include core metrics like LCP and CLS plus a per-image breakdown of suggested changes.

Delegating Image Optimization to a CDN

Managing formats, compression levels, and responsive sizing on your own infrastructure can quickly become a maintenance burden. CDN-based image optimization solutions offload that work by handling the heavy lifting at the edge, close to your users.

With Cloudflare Images, you store your originals with Cloudflare and then define a set of variants for delivery. Each variant specifies the dimensions, fit, and compression parameters that map to a particular slot in your layout—a thumbnail, a hero banner, or an article body image, for instance.

When a request hits the edge, Cloudflare automatically negotiates the optimal format for the requesting browser (WebP, AVIF, or fallbacks) and returns the variant that matches the size rules you set. This removes the need for a complex srcset pipeline or a build-time image processing step; you simply reference the variant, and the edge handles resizing and encoding on the fly.

The service is designed to solve the same core performance problems outlined above—bandwidth waste from oversized files, layout shift from missing dimensions, and user frustration from slow-loading visuals—without tying you to a specific framework or server setup. You control the dimension constraints and fit behavior directly in the variant configuration rather than sprinkling transformation logic through your application code.

Pricing starts at $6/month for the entry-level tier, with additional features and integrations expected as the platform matures. If your site already sits behind Cloudflare, keeping image processing at the same edge node removes an extra network hop and keeps your origin payload lean.