How to Compress Images for Faster Websites
Images typically account for 50–75% of a web page's total byte weight. If your pages are slow, unoptimised images are almost certainly the first thing to fix. This guide walks through everything you need to know — why it matters, how to measure it, and exactly what to do.
Why Image Size Matters
Page speed directly affects user experience and, increasingly, search engine rankings. Google's Core Web Vitals — the set of metrics Google uses to evaluate page experience — include Largest Contentful Paint (LCP), which measures how long it takes for the largest visible element on the page to load. For most pages, that largest element is an image.
A good LCP score requires the main content to appear within 2.5 seconds on a mobile connection. A single uncompressed hero image of 3–5 MB makes this impossible on most mobile networks. That same image, properly compressed, can be under 150 KB and load in under half a second.
Beyond rankings, there is also a direct revenue argument. Research consistently shows that each additional second of page load time reduces conversion rates by 4–8%. Image compression is one of the highest-return-on-investment optimisations available to any website.
Step 1 — Choose the Right Format
The format you save an image in is the single biggest decision you will make. The wrong choice can make a file 5× larger than it needs to be.
For photographs (product images, hero photos, blog thumbnails): use WebP as your primary format. It is 25–34% smaller than JPG at equivalent quality and is supported by all modern browsers. Use JPG as a fallback if you need to support older browsers.
For logos, icons, and UI elements (especially those with transparent backgrounds): use WebP in lossless mode, or PNG if WebP is not available. Never use JPG for these — the lossy compression creates ugly artefacts around sharp edges.
For email newsletters: use JPG. Most email clients do not support WebP, and PNG produces unnecessarily large files for photographs.
Step 2 — Resize Before Compressing
Compression reduces the quality of colour data within a given set of dimensions. But if you are serving a 4000×3000 px image in a 400×300 px thumbnail slot, you are sending 100× more pixels than necessary — even at high compression. Resizing to the actual display dimensions is always the first step.
For responsive websites, you typically need several sizes of the same image: a large version for desktop, a medium version for tablets, and a small version for phones. Serving appropriately sized images to each device using HTML's srcset attribute is called responsive images, and it can reduce mobile data use by 60–80% compared to serving full-desktop-size images to all devices.
A good rule of thumb: never serve an image wider than 1,920 px for desktop, 768 px for tablet, or 480 px for mobile. Your actual needs depend on your layout.
Step 3 — Set the Right Quality Level
JPEG and WebP both have a quality setting, typically expressed as a number from 0 to 100. Higher quality = larger file size. The key insight is that quality settings are not linear in their perceptual impact: the difference between quality 95 and 85 is almost invisible to most people, but the file size difference is enormous.
As a starting point, try these quality settings and compare the results visually:
| Use Case | JPG Quality | WebP Quality |
|---|---|---|
| Hero images & full-width photos | 75–80 | 75–80 |
| Product & blog thumbnails | 70–75 | 70–75 |
| Email newsletter images | 65–75 | N/A (use JPG) |
| Background decorative images | 55–65 | 55–65 |
| Profile photos & avatars | 75–85 | 75–85 |
These are starting points. Always compare visually at your intended display size — quality that looks fine in a 200×200 thumbnail may look bad in a 1200×600 hero.
Step 4 — Strip Metadata
Every image file contains metadata — information embedded by the camera or editing software that describes how the photo was taken: camera model, GPS location, shooting settings, copyright notices, and more (EXIF data). For a photograph taken on a modern smartphone, this metadata can add 20–50 KB to every image.
This metadata is invisible to your visitors and serves no purpose on a web page. Stripping it during export or compression can meaningfully reduce file sizes, especially if you have many images. Most compression tools, including our browser-based compressor, remove EXIF data automatically as part of the compression process.
Step 5 — Target File Size by Use Case
Rather than guessing, use these target file sizes as a benchmark:
- Hero / banner image
- Under 150–200 KB. This is the image with the biggest LCP impact.
- Blog post thumbnail
- Under 50–80 KB. Dozens of these load on index pages.
- Product photo
- Under 100–150 KB for the main image; under 50 KB for grid thumbnails.
- Profile / avatar photo
- Under 30–50 KB. Many appear on a single page.
- Background image
- Under 100 KB if full-screen; often can be much lower.
- Form upload (government / HR)
- Check the platform's requirement — often 20 KB, 50 KB, or 100 KB.
Common Mistakes to Avoid
- ✕Saving photographs as PNG.
PNG uses lossless compression which makes photo files enormous. A 500 KB JPG photo can balloon to 4–6 MB as PNG.
- ✕Uploading images at camera resolution.
A 24-megapixel smartphone photo is 6000×4000 px. Unless you are running a photography portfolio, no web page needs images that large.
- ✕Re-compressing already-compressed JPGs.
Each time you open and re-save a JPG, quality degrades further. Always keep the original and export fresh from it.
- ✕Using quality 100 "to be safe".
Quality 100 on a JPG is dramatically larger than quality 85, with almost no visible difference. It is almost never the right choice for web images.
Free Tools to Compress Your Images
All of the following tools run entirely in your browser — your images are never uploaded to a server: