How to Compress Images for Web: Boost Page Speed & SEO
A practical, no-nonsense guide to compressing images for the web — why it matters for page speed and Core Web Vitals, how to choose formats and quality settings, and the exact steps to optimise any image before you upload it.
Table of contents
Why image compression matters for web
Images account for the majority of the bytes downloaded on a typical web page. According to the HTTP Archive, images make up well over half of total page weight on the average site. If you want a fast, search-friendly website, optimising your images is the single highest-leverage change you can make.
When you compress images for web, three things improve immediately: your pages load faster, your visitors stay longer, and search engines reward you with better rankings. Google has confirmed that page speed is a ranking signal, and its Core Web Vitals programme puts image-heavy elements under direct measurement.
The cost of ignoring this is real. A single uncompressed 5 MB hero photo can add several seconds to your Largest Contentful Paint, push your page out of Google's “good” Core Web Vitals threshold, and cost you rankings and conversions. Mobile users on slower connections feel the impact most acutely.
The opportunity: Most web images can be reduced by 50–90% with no visible quality loss. That means halving your page weight in minutes, with no design changes required.
Core Web Vitals explained
Core Web Vitals are Google's set of standardised metrics for measuring real-world user experience. They focus on three aspects of every page load: loading, interactivity, and visual stability. Images play a central role in at least two of them.
LCP
Largest Contentful Paint
Time until the largest visible element renders. Images are frequently the LCP element. Target under 2.5s.
CLS
Cumulative Layout Shift
How much the layout jumps as it loads. Images without dimensions cause shifts. Target under 0.1.
INP
Interaction to Next Paint
Responsiveness to user input. Heavy pages load slower and respond worse. Target under 200ms.
Pages that pass all three thresholds are marked “good” in Google Search Console and PageSpeed Insights. Pages that fail are flagged for improvement, and there is growing evidence that poor scores correlate with lower rankings.
How images affect LCP & CLS
The Largest Contentful Paint (LCP) element is the largest block of text or image that becomes visible in the viewport. On most content pages, ecommerce stores, and landing pages, that element is an image — usually a hero banner, featured photo, or product image. If that image is large and unoptimised, it becomes the bottleneck for your entire load time.
Cumulative Layout Shift (CLS) measures unexpected movement of page elements. The most common cause is images that load without reserved space, pushing text and buttons around as they appear. The fix is simple and universal: always specify width and height attributes on every image.
How compression improves page speed
Page speed is fundamentally a function of bytes transferred over the network. Cut the bytes and you cut the load time. Because images dominate page weight, compressing them yields the largest speed gains for the least engineering effort.
A typical scenario: a blog post has a 3 MB hero image. On a fast fibre connection it loads in under a second, so it feels fine to test from your desk. But on a 4G mobile connection — the connection most of your visitors actually use — that same image takes 3–4 seconds to download, blowing past your LCP target before the browser even begins to paint it.
| Image | File size | Load time (4G) | LCP impact |
|---|---|---|---|
| Uncompressed hero | 3.0 MB | ~4.0s | Fails |
| JPG quality 80 | 650 KB | ~0.9s | Passes |
| WebP quality 80 | 430 KB | ~0.6s | Comfortable |
The visual difference between the 3 MB original and the 430 KB WebP is invisible at normal viewing size. The difference to your visitors and your rankings is enormous.
Best practices for web images
Compression alone is not enough. A well-optimised web image is the result of four decisions working together: dimensions, format, quality, and delivery. Get all four right and your images will be fast and look great.
1. Resize before compressing
Never serve a 6000px-wide photo in a 600px container. Resize images to the largest size they will actually be displayed at (accounting for retina displays, so roughly 2x the CSS width). This alone can cut file size by 80%.
2. Choose the right format
Use WebP for most images, JPG for photos when you need broad compatibility, and PNG for graphics with transparency or sharp text. Consider AVIF for cutting-edge compression where browser support allows.
3. Pick the right quality
For web, quality 70–85 is the sweet spot. Below 60, artefacts become visible; above 90, you are wasting bytes for no perceptible gain. Always preview at the actual display size.
4. Lazy-load below the fold
Add loading="lazy" to images that are not immediately visible. This defers their download until the user scrolls near them, speeding up the initial render and saving bandwidth.
Golden rule: Serve every image at the exact size it is displayed, in the most efficient format, at the lowest quality that still looks good, and only when the user needs it.
Format cheat sheet
| Format | Best for | Transparency |
|---|---|---|
| WebP | Most web images (smallest files) | Yes |
| AVIF | Cutting-edge compression, modern browsers | Yes |
| JPG | Photos, maximum compatibility | No |
| PNG | Graphics, logos, text, screenshots | Yes |
| SVG | Icons, logos, simple illustrations | Yes |
Step-by-step: compress images for web
The fastest way to optimise images for website use is with a browser-based compressor that processes files locally. Nothing is uploaded, so it is instant, free, and completely private.
Open a browser-based compressor
Use a tool that runs client-side so your images never leave your device. Our free image compressor is 100% private and processes everything in your browser.
Drag in your images
Add one or many images at once. Most modern compressors accept drag-and-drop or a file picker. Batch mode is a time-saver when you are preparing a whole set of product photos or blog images.
Resize to the display dimensions
Set the width to match the largest size the image will appear at (around 2x the CSS width for retina screens). Resizing a 6000px photo down to 1600px before compressing is the single biggest win.
Choose your format and quality
Export as WebP for the smallest files, or JPG for broad compatibility. Pick a quality between 75 and 85 for web. Preview the result at the real display size to confirm it looks good.
Add width, height, and lazy loading
When you add the image to your site, set explicit width and height attributes to prevent layout shift. Add loading="lazy" to every image below the fold, but never to your LCP hero image.
Verify with PageSpeed Insights
Run your page through PageSpeed Insights or Lighthouse. Confirm your LCP is under 2.5s, CLS under 0.1, and that no images are flagged as needing optimisation.
Need to hit an exact file size for a CMS, form upload, or email? Use a compressor with a target-size feature, like our image compressor. You can also learn how to hit the most common target in our guide to compressing images to 100KB.
Common web image mistakes
Even experienced developers and content teams make these errors. They are easy to fix and deliver outsized speed gains.
Frequently asked questions
Why should I compress images for my website?
Compressed images load faster, which improves page speed, Core Web Vitals scores (especially LCP), user experience, and SEO rankings. They also reduce bandwidth costs and mobile data usage for your visitors.
What is the best image format for the web?
WebP is the best format for most web images because it is 25-35% smaller than JPG and PNG at equivalent quality, with universal modern browser support. Use JPG for photos when you need maximum compatibility, and PNG for graphics with transparency or sharp text. AVIF offers even smaller files but wider support is still maturing.
What file size should my web images be?
Aim for under 100KB for most content images and under 200-500KB for hero or product images. The key rule is to serve images no larger than the size they are displayed, and to keep your Largest Contentful Paint image under 2.5 seconds to pass the Core Web Vitals LCP threshold.
How does image compression affect Core Web Vitals?
Image compression directly affects LCP (Largest Contentful Paint), because large hero images are often the largest element on a page. It also affects CLS (Cumulative Layout Shift) when images lack dimensions, and overall page weight, which influences INP and FID through faster load times.
Is it better to compress images in the browser or on a server?
Browser-based (client-side) compression is better for privacy because your images never leave your device. It is also instant and free. Server-based compression requires uploading your images to a third-party server, which is a privacy risk. For build pipelines, compress images at build time or serve them through a CDN with on-the-fly optimization.