Image Compression for Web: Optimise Images Without Losing Quality
Learn how to compress images for the web correctly — recommended formats, quality settings, tools, and how image optimisation directly improves your SEO rankings.
Advertisement
Images typically account for 50–80% of a webpage's total download size. Google's Core Web Vitals — particularly Largest Contentful Paint (LCP) — are directly affected by how quickly your main images load. Proper image compression reduces page weight dramatically, improving load times, search rankings, and user experience on mobile networks.
Why Image Optimisation Matters for SEO
- LCP (Largest Contentful Paint) — Google's key loading speed metric — is usually an image element
- Google's PageSpeed Insights directly flags unoptimised images as a 'Serve images in next-gen formats' warning
- Mobile users on slower connections abandon pages that take more than 3 seconds to load
- Faster pages earn better crawl rates from Googlebot, enabling more content to be indexed
- Image file names and alt text are direct on-page SEO signals
Choosing the Right Format
- Photographs → WebP (JPG as fallback for older browsers)
- Icons, logos, UI elements → SVG or WebP
- Graphics with transparency → WebP or PNG
- Animations → WebP (APNG or GIF as fallback)
- Next-gen quality-critical images → AVIF with WebP fallback
Quality Settings: How Low Is Too Low?
The quality setting (1–100) controls the trade-off between file size and visual fidelity. At 85%, a JPG or WebP is visually indistinguishable from the original at typical screen sizes. At 75%, a slight quality reduction may be visible under close inspection. Below 60%, artefacts become noticeable to most users. The optimal setting depends on context — product shots where customers zoom in need higher quality than background or decorative images.
| Quality | Typical size reduction | Artefacts visible? | Best for |
|---|---|---|---|
| 85–90% | 40–55% | No | Hero images, product photos |
| 75–84% | 55–65% | Barely at 100% zoom | Blog images, thumbnails |
| 60–74% | 65–75% | Visible on close inspection | Background images |
| Below 60% | 75%+ | Noticeable to most users | Previews, placeholders only |
Resizing: Serve the Right Dimensions
Uploading a 4000×3000 pixel photo to display at 800×600 on a webpage wastes download bandwidth — the browser downloads the full 4000px image and then scales it down. Always resize images to the maximum display dimensions before compression. For responsive images, use srcset to serve different sizes for different screen widths.
2× for retina screens
High-DPI (Retina) displays render images at 2× the CSS pixel dimensions. An image displayed at 800×600 CSS pixels should be 1600×1200 actual pixels for crispness on Retina. WebP's efficient compression means the file size is still acceptable at these dimensions.
Image Compression Tools
- AllConverter.tools Image Compressor — free, browser-based, supports batch compression
- Squoosh (squoosh.app) — Google's web tool for side-by-side quality comparison
- ImageOptim (Mac) — automatic batch compression with excellent defaults
- Sharp (Node.js) — programmatic compression for build pipelines and CMS automation
- Next.js Image component — automatic WebP conversion and lazy loading for Next.js sites
Compress your images free
Batch compress JPG, PNG, and WebP images with quality control — no upload.
A Practical Compression Workflow
- Start with a high-quality master (PNG for graphics, JPG/RAW for photos)
- Resize to maximum display dimensions + 2× for Retina (e.g., 1600px wide for an 800px column)
- Convert to WebP for web delivery
- Set quality to 80–85% for photos, 90% for product images
- Use the <picture> element with WebP source and JPG fallback
- Add descriptive file names (product-red-running-shoe-side-view.webp not IMG_1234.jpg)
- Always add meaningful alt text for SEO and accessibility
Frequently Asked Questions
How much can image compression improve page load time?
For most websites, proper image compression reduces page weight by 30–60%, which typically translates to 0.5–2 second load time improvements. This directly improves LCP scores and can move a page from 'Needs Improvement' to 'Good' on Core Web Vitals.
Should I use lazy loading for images?
Yes — add loading='lazy' to all images that are not in the initial viewport. This defers their download until the user scrolls toward them, improving initial page load speed without any quality loss. Add loading='eager' (or omit the attribute) for above-the-fold images to avoid delayed LCP.
What alt text should I write for images?
Alt text should describe the image content concisely (not 'image of' — just describe it). Include your target keyword naturally if it accurately describes the image, but do not force keywords. For decorative images, use alt='' to tell screen readers to skip them.