How to Compress Images Without Losing Quality
Most people treat image compression as a trade: smaller file, worse picture. That trade exists, but it is not the first lever you should pull. Before you touch the quality slider, three other factors decide how big that file is going to be — and two of them can shrink a photo by more than half without discarding a single pixel of detail.
This guide covers what actually controls file size, how to pick a target for a given use case, and how to do it without handing your photos to a stranger’s server.
Lossy vs lossless: the distinction that matters
Lossless compression rewrites the file’s internal representation to remove redundancy while keeping every pixel value identical. A PNG of a screenshot can often lose 40–70% of its size this way. What comes out is bit-for-bit the same image. This is what you want for screenshots, logos, diagrams, UI mockups, and anything with flat colour and sharp edges.
Lossy compression discards information the human eye is unlikely to miss — mostly high-frequency detail in areas of subtle variation. This is what JPEG and WebP do. A 4MB photo from a phone camera can drop to 300KB with no visible difference at normal viewing size. Push further and you start to see it: blocky patches in smooth gradients, halos around high-contrast edges, that smeared “JPEG look” on text.
The practical rule: lossless for graphics, lossy for photographs. Applying lossy compression to a screenshot produces a fuzzy mess at any meaningful reduction. Applying lossless compression to a photo barely helps, because photographic data is already close to random.
What actually controls file size
People reach for the quality slider first. It is the third most important factor.
1. Resolution. File size scales roughly with pixel count. A 4000×3000 photo has twelve million pixels; a 1200×900 version has 1.08 million — about 9% of the data. If the image will be displayed at 800px wide, storing it at 4000px wide is pure waste, no matter how you compress it. Resize first, then compress. This one step usually beats anything the quality slider can do.
2. Format. For the same visual quality, the modern formats are simply smaller. Google’s own published benchmarks put WebP at roughly 25–35% below JPEG, and AVIF typically below that again. Support is now broad — every current major browser renders WebP, and AVIF is close behind. The exception is when you need maximum compatibility with older software, where JPEG still wins by default.
3. Quality setting. Only now does this matter. Dropping JPEG quality from 100 to 80 is often a 3–5× size reduction with almost no perceptible change. Dropping from 80 to 60 starts to show. Dropping below 50 is rarely worth it — you lose visible detail and save less than you would expect, because the remaining data is the hard-to-compress part.
Targets by use case
These are working ranges, not laws. Treat them as a starting point and check the result at the size it will actually be viewed.
| Use case | Target | Notes |
|---|---|---|
| Web page hero image | 150–300KB | Resize to display width first |
| Blog post inline image | 50–150KB | 1200px wide is usually plenty |
| Thumbnail / card | 15–40KB | 400px wide, aggressive quality is fine |
| Email attachment | Under 500KB each | Many clients cap total message size |
| Social post | Under 1MB | Platforms re-compress anyway; do not fight it |
| Print or archival | Do not compress | Keep the original; size is not the constraint |
That last row matters more than it looks. Keep your originals. Compress a copy. Storage is cheap; a lost original is not.
Compressing in the browser
Every major online compressor works the same way: you upload the file, a server compresses it, you download the result. That means your image — which may be a passport scan, a signed contract, a photo of your kids — sits on someone else’s disk for an unknown period, under an unknown policy.
ToolVeil’s compressors do the work locally instead, using the browser’s own canvas and encoding APIs. Nothing is transmitted. You can verify this yourself: open your browser’s developer tools, switch to the Network tab, and compress an image. There is no upload request.
- Compress an image to an exact size — type in the ceiling your form enforces and get the highest quality that still fits. Common ceilings: 100KB for older web forms, 240KB for US visa photos, 500KB for email and job portals.
It adjusts quality automatically until the file fits the target, using the highest setting that still lands under it. If you would rather control the format and quality directly, use the image converter. If your photos come off an iPhone as HEIC files, convert them first — see how to convert HEIC to JPG.
The tools choose the output format for you. They try WebP first — smaller at the same visual quality, and it keeps transparency — and fall back to JPEG only when that fits your target better, so the file you download is usually a .webp. That is fine for the web and most modern platforms, but some upload forms, visa and exam portals in particular, accept only JPG. If you are submitting to one of those, pass the result through the image converter and check the size again: JPEG is slightly larger at the same quality, so a file that only just fit as WebP can creep back over the limit.
For images that need to fit a specific platform’s dimensions rather than a specific file size, the social image resizer handles both at once.
Three mistakes that undo your savings
Compressing before resizing. You spend the quality budget on pixels nobody will see, then the file is still too large. Resize to the display size, then compress.
Re-compressing an already-compressed file. Each JPEG pass discards more information. Ten rounds of “just a bit smaller” is much worse than one round at the right setting. Always go back to the original.
Compressing a screenshot with a lossy codec. Text and UI edges are exactly what lossy compression handles badly. Use PNG or WebP lossless for anything with sharp edges and flat colour.
Frequently asked questions
Does compressing an image reduce quality? If you use lossless compression, no — the pixels are identical. If you use lossy compression, technically yes, but the loss is designed to be invisible at normal viewing size. The visible damage usually comes from over-compressing, not from compressing at all.
What is the best image format for the web? WebP for most photographs and graphics, with JPEG as a fallback for compatibility and PNG for images that need lossless fidelity or transparency. AVIF is smaller still where you can support it.
How small can I make a photo before it looks bad? It depends on viewing size more than on any number. A photo viewed at 300px wide looks fine at 30KB; the same file stretched across a 1920px hero will look terrible. Judge at the size it will be shown.
Why is my PNG larger than the original JPEG? Because PNG is lossless. Converting a photo to PNG preserves every pixel and therefore keeps all the data the JPEG had already thrown away. Never convert photographs to PNG to save space — it does the opposite.
Can I compress an image without uploading it anywhere? Yes. Modern browsers can decode, resize, and re-encode images entirely in memory. The compressors on this site work this way, and you can confirm it in your browser’s network tab.