Image optimization

Image optimization is the practice of making images load faster by reducing the file size as much as possible while maintaining appropriate image quality. On most websites, images are the single largest contributor to page weight, and optimising them is one of the highest-leverage performance improvements.

Image optimization levers

1. Format

Choosing the right format makes the biggest single difference. Some older formats simply can't match the compression and quality ratio of modern image formats.

• WebP — Developed by Google, supported in all modern browsers. ≈30% smaller than JPEG at equivalent quality. Supports both lossy and lossless modes. The current default for most photographs.
• AVIF — newer and more efficient (≈50% smaller than JPEG). All major browsers now support AVIF, but decoding is slightly slower.
• JPEG — the universal fallback for photographs. Lossy, no transparency, a middle ground of size vs quality.
• PNG — lossless, supports transparency. Best for logos, icons, screenshots with text. Larger files than JPEG/WebP.
• SVG — a vector format. Tiny, infinitely scalable, ideal for logos, icons, and simple illustrations.
• GIF — the original animated image format, now very dated. Modern MP4 or WebP/AVIF formats can achieve the same results while being ≈90% smaller.

A common modern setup serves AVIF when supported, falls back to WebP, and finally to JPEG/PNG using the <picture> element.

2. Dimensions

A common mistake: serving an image at the full original dimensions, and using styling to visually resize the image for the website while not actually reducing its size. For example, a 4000×3000 photo displayed at 800×600 is 96% wasted data. Images should be resized to the actual required dimensions (or 2× for retina displays) before uploading.

3. Compression

For the purposes of websites, most images can be compressed significantly without visible quality loss:

• Lossy compression (JPEG, WebP, AVIF) — discards data the eye doesn't notice, but does impact image quality if compressed too far.
• Lossless compression (PNG, lossless WebP) — preserves every pixel exactly. Smaller savings, but no quality loss.

4. Delivery

• CDN — serve images from edge servers near the user. Cloudflare Images, for example, does this with on-the-fly optimization.
• Responsive images — <img srcset> and <picture> serve different file sizes to different devices.
• Lazy loading — loading="lazy" defers off-screen images until they're about to be scrolled into view.

The <picture> and srcset patterns

Modern format with fallback

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="masthead.jpg" alt="Description">
</picture>

Different sizes for different viewports

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Description"
  loading="lazy">

The browser picks the most efficient version based on the viewport size and pixel density.

Filenames and metadata

• Use descriptive filenames — blue-ceramic-vase.jpg is better than IMG_4521.jpg. Search engines utilize image recognition to understand the content of an image, but descriptive filenames still add value and are a relatively low-effort task. Use hyphens, lowercase, and meaningful words.
• Alt text — describes the image for screen readers and search engines.
• Strip unnecessary EXIF data — camera metadata, GPS coordinates, and software signatures can be stripped to reduce file size and protect privacy.

Core Web Vitals impact

Images directly affect:

• Largest Contentful Paint (LCP) — most often a masthead or hero image. Optimise format, size, and use fetchpriority="high" to prioritise it.
• Cumulative Layout Shift (CLS) — images without width and height attributes cause layout shifts as they load. Always specify dimensions.
• Interaction to Next Paint (INP) — heavy images can delay interactivity by blocking the main thread during decoding.

What "good" image optimization looks like

• LCP image under 200 KB on most pages.
• Images served in modern formats (AVIF or WebP) to compatible browsers.
• No image larger than its rendered display size.
• Every image has explicit dimensions, alt text, and lazy loading where appropriate.
• PageSpeed Insights "Properly size images" and "Serve images in next-gen formats" both pass.

Performance

Disclaimer: All information contained herein is for informational purposes only. It is not advice or instructional.