Image Optimisation for the Web: A Complete Guide

Images typically account for the largest portion of webpage weight. A hero image can be larger than all other page resources combined. Optimising images delivers the biggest performance gains for most websites, directly impacting load times, user experience, and Core Web Vitals.

Why Image Optimisation Matters

Images often represent 50-80% of page weight
Large images delay page loading significantly
LCP (Largest Contentful Paint) is often an image
Mobile users on slower connections suffer most
Hosting costs increase with bandwidth usage

An unoptimised 5MB hero image might take 10+ seconds on a mobile connection. The same image optimised could be 200KB—loading in under a second.

Image Formats

JPEG

Best for photographs and images with many colours. Lossy compression—quality degrades with compression, but file sizes can be very small. Still widely used and universally supported.

PNG

Best for graphics with transparency, sharp edges, or text. Lossless compression—quality preserved but files are larger. Don't use PNG for photographs.

WebP

Modern format that combines the best of JPEG and PNG. Supports lossy and lossless compression, transparency, and animation. Typically 25-35% smaller than equivalent JPEG/PNG. Now supported by all major browsers.

WebP should be your default choice for most web images.

AVIF

Newer format with even better compression than WebP—up to 50% smaller. Growing browser support but not yet universal. Good to include as a progressive enhancement.

SVG

Vector format for graphics, icons, and logos. Infinitely scalable without quality loss. Very small files for simple graphics. Not suitable for photographs.

GIF

Legacy format for simple animations. Limited to 256 colours. For new projects, video or modern image formats are usually better choices.

Compression

Compression reduces file size by removing data. Finding the right balance between file size and quality requires judgement.

Lossy Compression

Removes data permanently. At appropriate levels, quality loss is imperceptible. JPEG quality of 75-85% often provides good balance. Over-compression creates visible artefacts (blocky areas, colour banding).

Lossless Compression

Reduces file size without quality loss. Smaller savings than lossy but preserves original quality exactly. Good for graphics where precision matters.

Compression Tools

Squoosh: Browser-based, excellent for manual optimisation with preview
ImageOptim (Mac): Batch processing, easy to use
ShortPixel: Service for automated optimisation, WordPress plugin
Sharp: Node.js library for build-time optimisation

Responsive Images

A desktop hero image might be 2000px wide. On a phone, that's overkill—the screen might only be 375px wide. Responsive images serve appropriate sizes to each device.

srcset and sizes

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

This tells the browser which image sizes exist and when to use each. The browser chooses the optimal image based on screen size and pixel density.

Art Direction with picture

Sometimes different viewports need different image crops, not just sizes:

<picture>
  <source media="(max-width: 600px)" srcset="portrait.jpg">
  <source media="(min-width: 601px)" srcset="landscape.jpg">
  <img src="landscape.jpg" alt="Description">
</picture>

Format Fallbacks

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

Browsers choose the best format they support, with JPEG as fallback for older browsers.

Lazy Loading

Images below the fold (not visible on initial load) shouldn't block page rendering. Lazy loading defers these images until needed.

<img src="image.jpg" loading="lazy" alt="Description">

This native attribute delays loading until the image approaches the viewport. Simple and effective for most use cases.

Important: Don't lazy load images visible on initial load (LCP candidates). This delays the most important visual content.

Dimensions and Layout Shift

Always specify image dimensions:

<img src="image.jpg" width="800" height="600" alt="Description">

Without dimensions, the browser doesn't know how much space to reserve. When the image loads, content shifts—damaging CLS (Cumulative Layout Shift) scores and user experience.

Modern CSS can make dimensioned images responsive:

img {
  max-width: 100%;
  height: auto;
}

CDN and Caching

Content Delivery Networks serve images from servers geographically close to users, reducing latency. Many also offer on-the-fly optimisation—resizing, format conversion, and compression at the edge.

Popular image CDNs include Cloudinary, imgix, and Bunny.net. They can automatically serve WebP to supporting browsers, resize images per request, and handle optimisation automatically.

Proper cache headers ensure images aren't re-downloaded unnecessarily. Images rarely change—long cache times are appropriate.

Build-Time Optimisation

Modern build tools can optimise images automatically:

Generate multiple sizes for responsive images
Convert to WebP/AVIF
Compress appropriately
Generate blur placeholders

This ensures optimisation happens systematically, not manually per image.

CMS Considerations

If content editors upload images through a CMS, they often don't optimise properly. Solutions include:

Maximum upload size limits
Automatic resizing on upload
Automatic format conversion
Integration with optimisation services
Clear guidance for editors on image requirements

Common Mistakes

Uploading huge images: A 4000×3000 photo from a camera doesn't belong directly on a website. Resize first.

Using wrong formats: PNG photos, JPEG graphics with transparency needs—matching format to content matters.

No responsive images: Serving desktop images to mobile devices wastes bandwidth.

Missing dimensions: Causes layout shift as images load.

Over-compression: Visible quality degradation to save bytes isn't worthwhile.

Lazy loading LCP: Delaying the most important image hurts perceived performance.

Practical Steps

Audit current images for oversized files
Convert to WebP (with fallbacks if needed)
Implement responsive images for key visuals
Add lazy loading to below-fold images
Ensure all images have dimensions
Consider CDN for high-traffic sites
Establish upload guidelines for CMS users

Our Approach

We optimise images as part of every project: appropriate formats, responsive sizing, lazy loading, and proper caching. Our build processes handle optimisation automatically, ensuring consistent results.

If your site suffers from slow loading or poor Core Web Vitals, image optimisation often provides the biggest improvements. Contact us to discuss how we can help.