How to Compress Images for the Web
Images are usually the heaviest thing on a web page, and most of that weight is avoidable. Compression works because photographs contain far more detail than a screen — or an eye — can resolve at display size.
Lossy vs lossless
Lossless compression (PNG, WebP lossless) rebuilds the exact original pixels and typically saves 5–30%. Lossy compression (JPEG, WebP, AVIF) discards detail the eye is least sensitive to and routinely saves 60–90%. For photographs, lossy is almost always the right answer.
Resize before you compress
This is the biggest single win and it is regularly skipped. A 4000 px photo displayed in a 800 px column carries 25 times more pixels than it can show. Resize to roughly twice the display width — enough for high-density screens — and then compress.
| Placement | Export width | Typical size |
|---|---|---|
| Thumbnail | 300–400 px | 10–30 KB |
| In-article image | 1200–1600 px | 80–200 KB |
| Full-width hero | 1920–2400 px | 150–350 KB |
| Logo / icon | SVG where possible | Under 10 KB |
Picking a quality level
- Quality 80–85 — the sweet spot for photographs; differences are invisible at normal viewing distance
- Quality 70–75 — acceptable for thumbnails and background imagery
- Below 65 — banding in skies and halos around edges start to show
- Above 90 — file size climbs steeply for detail nobody perceives
Judge quality at 100% zoom on the actual page, not in a full-screen preview. Compression artefacts that are obvious at 400% are irrelevant at display size.
Format matters as much as quality
- Photographs — WebP or AVIF, with JPEG as a fallback
- Screenshots, UI and flat colour — PNG or lossless WebP, which keep text crisp
- Transparency — WebP, PNG or AVIF
- Logos, icons, diagrams — SVG, which scales infinitely at a fraction of the size
- Animation — animated WebP instead of GIF, often 80% smaller
How to compress an image in the browser
Compress an image locally
- 1
Open the Image Compressor
Open TheToolSera Image Compressor — the file is decoded in your own browser.
- 2
Add the image
Drop in a JPG, PNG or WebP file.
- 3
Resize if needed
Set the target width to match how the image is actually displayed.
- 4
Adjust quality
Start at 80 and compare the preview against the original.
- 5
Download
Save the optimised file, or convert it to WebP for a further saving.
Image Compressor
Compress and resize images with a live preview and size readout.
Common mistakes
Using PNG for photographs
A photo saved as PNG can be ten times larger than the same photo as quality-85 JPEG, with no visible benefit.
Re-saving JPEGs repeatedly
Each save re-encodes and loses more detail. Always edit from the original, not from an exported copy.
Compressing without resizing
Quality settings cannot rescue an image that has four times too many pixels.
Serving one size to every device
Use srcset so phones download a small file and desktops get the large one.
Best practices
- Strip EXIF metadata before publishing — it can include GPS coordinates
- Keep an untouched master file and export derivatives from it
- Automate compression in your build pipeline so it is never forgotten
- Lazy-load images below the fold and set explicit width and height to avoid layout shift
Frequently asked questions
What quality setting should I use for JPEG?
Between 80 and 85 for most photographs. It removes the majority of the file size with no visible difference at display size.
Does compressing an image reduce its dimensions?
No — compression changes how pixels are stored. Reducing dimensions is resizing, and doing both gives the biggest saving.
Is WebP always smaller than JPEG?
Usually by 25–35% at equivalent quality, and it also supports transparency and animation. Support is universal in current browsers.
Can I compress images without uploading them?
Yes. Browser-based tools decode and re-encode with the Canvas API on your own device, so the file never leaves it.
Put this into practice
Image Compressor runs entirely in your browser — no upload, no account, no limits.
Open Image CompressorRelated tools
Related guides
PNG vs JPG vs WebP: Which Image Format to Use
Compare PNG, JPG, WebP and AVIF on compression, transparency, quality and browser support, with a simple decision guide for photos, screenshots, logos and animation.
How to Compress a PDF Without Wrecking the Quality
Understand what actually makes a PDF large, which compression settings matter, how much size you can realistically save, and how to compress a PDF privately in your browser.
Why Client-Side Tools Are Safer for Your Files
What actually happens when you upload a file to an online converter, how browser-based processing differs, how to verify a tool's claims, and when a server is unavoidable.
Why Does Compressing an Image Make It Bigger?
When image compression increases file size: re-encoding optimized JPEGs, PNG for photos, quality/format mismatches, and Max quality with no downsampling. How Image Compressor warns instead of faking a win — and what to try next.
Compress PDF Without Losing Quality
Honest guide to shrinking a PDF without wrecking it: Lossless (small safe savings), Compress images (re-encode photos, keep text selectable), and Rasterize (biggest savings, flattens pages). Pick the mode that matches your file.
How to Format JSON (Beautify, Indent and Minify)
Learn how JSON formatting works, see a before-and-after example, fix the errors that block beautifying, and format JSON online in your browser without uploading a file.