Images make websites engaging and informative — but they also account for the majority of page weight on most sites. An unoptimised image can single-handedly cause LCP failures, poor PageSpeed scores, and wasted bandwidth for mobile users.
Getting image optimisation right is one of the highest-impact technical improvements you can make.
Choose the Right Format
JPEG — Best for photographs and complex images with gradients. Lossy compression means file size can be reduced significantly with minimal visible quality loss. PNG — Best for images requiring transparency, logos, and images with sharp edges. Lossless but typically larger than JPEG. WebP — Google's image format. Typically 25-35% smaller than JPEG at equivalent quality, with support for transparency. Supported by all modern browsers. AVIF — The newest format. Typically 30-50% smaller than WebP with excellent quality. Browser support is excellent in 2024/2025. SVG — For logos, icons, and illustrations. Vector format that scales infinitely without quality loss. Tiny file sizes for appropriate use cases. Best practice: Convert photographs to WebP or AVIF. Use SVG for logos and icons.Compress Your Images
Even in modern formats, images often have room for compression. Tools: - Squoosh (free, web-based) — excellent quality control - TinyPNG/TinyJPEG — simple drag-and-drop compression - ImageOptim (Mac) — batch processing
Aim to get each image file under 200KB for full-width images. Product thumbnails and thumbnails should be under 50KB.
Set Explicit Dimensions
Every image element should have explicit width and height attributes:
``html
`
Without explicit dimensions, the browser can't reserve space for the image while it loads, causing layout shift (CLS) as content jumps when images appear.
Implement Lazy Loading
Images below the fold — not visible when the page first loads — should be lazy loaded. This defers their loading until the user is about to scroll to them, reducing initial page load time.
`html
`
Never lazy load your LCP image — the Largest Contentful Paint element must load as quickly as possible.
Use Responsive Images
Different devices need different image sizes. A 1200px image served to a mobile phone at 375px wide is wasting 3x the bandwidth. Use
srcset to serve appropriately sized images:
`html
`
Write Descriptive Alt Text
Alt text serves two purposes: it describes the image to users who can't see it (accessibility), and it tells Google what the image shows (SEO).
Good alt text is:
- Descriptive and specific ("Golden retriever sitting on a park bench")
- Not keyword-stuffed ("golden retriever dog pet animal puppy")
- Empty (
alt="") for purely decorative images
Images with good alt text can rank in Google Image Search, driving additional traffic.
Use a CDN for Images
Serving images through a CDN delivers them from servers geographically close to each user, dramatically reducing load times for international visitors. Most image-heavy sites see a 30-60% reduction in image load times after implementing a CDN.
Preload Your LCP Image
For your LCP image (typically the hero image on your homepage and key landing pages), add a preload hint in the
:
`html
``
This tells the browser to start downloading the image as soon as it encounters the hint, before it has even parsed the full HTML. It's one of the most effective individual fixes for improving LCP.