5 Ways to Speed Up Your Website's Images
Images are the biggest contributor to page weight on most websites. Here are five practical steps to make them faster without sacrificing quality.
Why images matter for performance
Images make up 65% of the average web page's weight, according to the HTTP Archive. They're also the leading cause of Largest Contentful Paint (LCP) failures — the Core Web Vital that most directly measures whether your page feels fast.
The good news: image optimisation has a higher return on effort than almost anything else you can do for web performance.
1. Compress before you upload
Before an image ever touches your server, run it through a compressor. Tools like Squoosh, ImageOptim (Mac), or Compressor.io can cut file sizes by 30–60% with no perceptible quality loss.
The mental model: compression at upload is your insurance policy. Even if your CDN does further optimisation, starting with a well-compressed source file means less work for everything downstream.
2. Serve modern formats
JPEG was designed in 1992. WebP offers better compression with the same quality, and every modern browser supports it. Switching from JPEG to WebP typically saves 25–35% per image.
For maximum compatibility, serve WebP to browsers that support it and JPEG as a fallback. A content-aware CDN handles this automatically via the Accept header.
3. Resize for the device
A 4000×3000 photo served to a mobile user who sees it at 400×300 is 100× more data than necessary. Resize images to the dimensions they'll actually be displayed at.
Use the srcset and sizes HTML attributes to serve different sizes to different viewports, or let a CDN handle it dynamically with a width parameter (?w=400).
4. Lazy load below-the-fold images
Images that aren't visible when the page loads don't need to be downloaded immediately. The native loading="lazy" attribute tells the browser to defer those images until the user scrolls toward them.
<img src="photo.jpg" loading="lazy" alt="..." />
Only your above-the-fold hero image should have loading="eager" (or priority in Next.js).
5. Use a CDN with edge caching
Serving images from a single origin server means every request makes a round trip to that server's location. A CDN replicates your images to data centres worldwide, so users get images from a server near them.
Even better: a CDN with transform caching means that once an image is resized or converted to WebP, the result is cached at the edge for all subsequent requests. The first request is slow; every request after is instant.
The compounding effect
These five techniques compound. A 500 KB JPEG that gets compressed, converted to WebP, resized for mobile, and served from a nearby CDN edge can become a 40 KB download — a 12× reduction.
At that scale, images stop being a performance bottleneck and start being a competitive advantage.
Want automatic image optimisation for your app?
Spronta converts, resizes, and delivers images at global scale — with predictable pricing and no credits.
See pricing →