Image optimization beyond compression

01 Why image optimisation matters

On most modern sites, images account for 60–80% of total page weight. Optimising them is the single highest-impact thing you can do for LCP, total transfer size and bandwidth costs. Get image delivery right and a "slow site" often becomes a "fast site" with no other change.

This guide goes beyond "compress your images." Compression is table stakes. The real wins in 2026 come from format choice, responsive delivery, and lazy-loading discipline.

02 WebP, AVIF and the format question

The three formats you should care about:

The pragmatic recommendation

Serve WebP as your default for every photographic image. It's well-supported, encoders are mature, and the size savings are substantial. Use the <picture> element to fall back to JPEG for the <2% of users on browsers that don't support WebP:

<picture>
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Description" width="1200" height="600">
</picture>

For sites where image bandwidth is a real concern (image-heavy publishers, e-commerce with hundreds of product photos per page), add AVIF as the first source for a further 15-20% savings:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Description" width="1200" height="600">
</picture>

03 Responsive images with srcset

Sending a 2400px-wide image to a phone that displays it at 375px is wasteful. The fix is srcset:

<img src="/hero-800.webp"
     srcset="/hero-400.webp 400w,
             /hero-800.webp 800w,
             /hero-1600.webp 1600w,
             /hero-2400.webp 2400w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Description"
     width="1600" height="800">

The browser inspects the device's viewport and pixel density and chooses the smallest image that meets the visual target. A phone gets the 400w version; a 4K display gets the 2400w version.

This is one of the highest-leverage performance changes you can make. A responsive-image rollout often cuts mobile LCP in half.

04 Lazy-loading without breaking LCP

Native lazy-loading is a one-line addition:

<img src="/below-fold.webp" loading="lazy" alt="…">

The browser defers loading until the image is near the viewport. For images below the fold, this is pure win.

The catch: never lazy-load your LCP image. A common pattern is "lazy-load every image" applied via a CMS template. The hero image then doesn't start loading until JavaScript runs, killing your LCP score.

The fix: explicitly mark above-the-fold images as eagerly loaded:

<img src="/hero.webp" loading="eager" fetchpriority="high"
     alt="…" width="1200" height="600">

fetchpriority="high" is the 2024+ way to tell the browser this image is critical, even if it's lower in the DOM than other resources.

05 CDN and delivery

A CDN serves your images from a server geographically close to the user, dramatically cutting transfer time for international audiences. In 2026 there's no excuse for serving images from a single origin server — every major CDN (Cloudflare, Fastly, AWS CloudFront, Bunny, ImageKit) offers free or cheap tiers.

Modern image CDNs go further: they auto-convert formats, resize on the fly based on URL parameters, and optimise compression. With one of these in place, you upload a single high-resolution master image and let the CDN serve format/size variants based on the request.

One thing to watch: cache headers. Set Cache-Control: public, max-age=31536000, immutable on hashed image URLs so repeat visits hit the browser cache, not your origin.

06 Alt text for SEO and accessibility

Alt text serves three audiences: screen-reader users (essential), search engines (helpful), and users on slow connections where images haven't loaded yet (bonus).

Three quick rules:

• Describe the image content briefly. "A blue widget mounted on a workbench" beats "image_3489.jpg".
• Don't keyword-stuff. "Buy blue widgets cheap blue widgets best blue widgets" reads as spam to Google and gibberish to a screen reader.
• Use empty alt for decorative images. alt="" tells screen readers to skip the image entirely. Without this, decorative icons get announced and slow down the user.

07 How to audit your images

Smart SEO Audit's image checks cover:

• Modern formats (WebP/AVIF) detection and recommendations.
• Missing alt attributes.
• Lazy loading present.
• Width and height attributes set (for CLS).

For deeper analysis, Chrome DevTools' Network panel filtered to "Img" tells you the exact byte cost of each image. The largest few are usually where 80% of your image weight lives.

? Frequently asked questions

Should I use WebP or AVIF in 2026?

Serve WebP as your default for photographic images — it's supported by ~98% of browsers and is 25–35% smaller than JPEG. Use a picture element to fall back to JPEG for the few unsupported browsers. If image bandwidth is a real concern, add AVIF as the first source for a further 15–20% saving (40–50% smaller than JPEG), with WebP and JPEG as fallbacks.

Why do images need width and height attributes?

Setting width and height (or CSS aspect-ratio) lets the browser reserve the correct space before the image loads, preventing the layout shift that hurts your CLS score. Images that load without reserved dimensions push surrounding content around, which is one of the most common Cumulative Layout Shift failures.

Should I lazy-load all my images?

No — never lazy-load your LCP image (usually the hero or first large image above the fold). Adding loading="lazy" to everything, including above-the-fold images, measurably delays Largest Contentful Paint. Lazy-load only below-the-fold images, and consider preloading the LCP image instead.

→ Related guides

Keep going — these companion guides go deeper on related topics.