How to Optimize Web Images

Reduce image weight without sacrificing quality to improve performance and SEO

9 min

Images account for 40% to 70% of the total weight of most web pages. They are the performance factor with the greatest improvement potential and, at the same time, one of the most neglected. An unoptimised 3 MB hero image can ruin the LCP (Largest Contentful Paint) of the entire page.

This guide covers the complete image optimisation ecosystem: modern formats, intelligent compression, responsive images, native lazy loading and delivery via CDN. Techniques that reduce image weight by 50% to 90% without perceptible quality loss.

Modern formats: WebP and AVIF

JPEG and PNG remain the most widely used formats, but WebP and AVIF offer significantly better compression at the same visual quality. Adopting these formats is the single change with the greatest impact on image weight.

  • WebP: developed by Google, reduces size by 25-35% vs JPEG at equivalent quality. Supported by all modern browsers (>97% globally).
  • AVIF: based on the AV1 codec, offers an additional 50% reduction over WebP. Growing support (>92% globally), ideal for photographic images.
  • SVG: vector format ideal for icons, logos and illustrations. Scales without loss and is manipulable with CSS/JavaScript.
  • Use the <picture> element with fallbacks: AVIF > WebP > JPEG for maximum compatibility.

Intelligent compression

Compression reduces file weight by removing redundant information. The key is finding the balance between weight reduction and visual quality. A quality level of 75-85% in JPEG/WebP is indistinguishable from the original in most cases.

  • Sharp (Node.js): the reference library for server-side image processing. Uses libvips under the hood for optimal performance.
  • Squoosh: Google’s web tool for visually comparing formats and compression levels.
  • ImageOptim (macOS): batch lossless image optimisation.
  • TinyPNG/TinyJPG: API and web tool for lossy compression with excellent results.

Responsive images with srcset and sizes

Serving a 2000 px image to a mobile device with a 375 px screen is a waste of bandwidth. Responsive images allow the browser to choose the right size for each device and screen resolution.

The srcset attribute defines available sources with their widths, and sizes tells the browser what percentage of the viewport the image occupies. With this information, the browser downloads only the necessary image size. Frameworks like Next.js (next/image) and Astro (<Image />) generate srcset automatically.

Native lazy loading

Lazy loading defers image loading until they are about to enter the user’s viewport. This drastically reduces initial load time and data consumption, especially on pages with many images.

The native HTML attribute loading="lazy" is supported by all modern browsers and requires no JavaScript. Do not apply lazy loading to the LCP image (the largest visible image on page load) — this should be loaded with priority using fetchpriority="high".

  • Use loading="lazy" for all images below the fold
  • Use fetchpriority="high" and loading="eager" for the hero/LCP image
  • Set explicit width and height to prevent layout shifts (CLS)
  • Consider decoding="async" for non-critical images: it frees the main thread during decoding

CDN and image services

An image CDN goes beyond geographical distribution: it transforms, resizes and converts formats on-the-fly based on the user’s device and browser. This eliminates the need to generate and store multiple versions of each image.

  • Cloudinary: image transformation, optimisation and CDN with a comprehensive API. Generous free plan for small projects.
  • Imgix: real-time transformation with parameterised URLs. Enterprise performance.
  • Cloudflare Images: image storage and delivery with configurable variants. Integrated with Cloudflare CDN.
  • Vercel Image Optimization: automatic optimisation integrated into the Next.js framework.

Image SEO and accessibility

Optimised images contribute to SEO in two ways: they improve Core Web Vitals (a ranking factor) and appear in Google Images (a significant traffic source for many sites). Alt text is essential for both SEO and accessibility.

Use descriptive filenames (product-running-shoes.webp instead of IMG_4532.webp). Implement structured data for product images. Generate image sitemaps to facilitate indexing. Alt text should describe the image usefully, not stuff keywords.

Key Takeaways

  • WebP reduces size by 25-35% vs JPEG; AVIF by an additional 50%
  • Use srcset and sizes to serve the right size for each device
  • Apply native lazy loading (loading="lazy") to all images except the LCP
  • Image CDNs transform and optimise on-the-fly without maintaining multiple versions
  • Descriptive alt text improves both SEO and accessibility

Are your images slowing down your website?

We audit your site’s visual performance and apply image optimisation that immediately improves Core Web Vitals.