You have a photo that will not upload, or a page that takes four seconds to appear, and somewhere in it is a 6 MB image. The instinct is to reach for a "quality" slider and drag it left until the number looks acceptable. That works, sort of, and it is almost never the thing that was actually wrong.
The boring reason your image is huge
It has too many pixels.
A photo from a current phone is somewhere around 4000 pixels wide. The place you are putting it — a blog post, a product listing, a profile header — displays it at 800 to 1200 pixels wide. You are sending four to five times more image than anyone will ever see, and the browser throws the rest away after downloading every byte of it.
File size scales with area, not width, so halving the width quarters the pixel count. Going from 4000 px to 1000 px is a 16× reduction before you touch compression at all. This is why resizing beats every other lever, and why quality sliders feel disappointing: you are fine-tuning the last 20% while ignoring the first 80%.
What width do you actually need?
- 1920 px — a full-width hero image on a desktop site. Above this, only a handful of very large monitors benefit.
- 1200 px — an image inside an article, displayed edge to edge in the content column.
- 800 px — most in-article images, and plenty for anything with text wrapped around it.
- 400 px — thumbnails, avatars, list items.
Double those numbers if the image has to stay crisp on a high-density display and you are not serving multiple sizes. A 1600 px file shown at 800 px covers a retina screen properly.
Then, and only then, compress
Once the dimensions are right, compression does the rest. For photographs, 70–80% quality is where you want to be: at normal viewing size the difference from the original is invisible, and the file is a fraction of the size. Below about 60% you start seeing blocky patches in skies and smooth gradients, which is the first place JPEG artifacts show up.
Both steps happen together in the image compressor here — set a max width, pick a quality, and it shows you the before and after in bytes so you can see which change did the work. Nothing uploads; the resizing and re-encoding happen in your browser using the same engine that draws the page.
Pick the right format while you are at it
Format choice is worth another 25–35% on top of everything above.
- WebP for anything going on a website. Smaller than JPEG at equivalent quality, handles transparency, and supported by every browser released in years.
- JPEG when the file has to work somewhere unpredictable — an email attachment, a print shop, a government upload form that was written in 2011.
- PNG only for graphics with flat colour and sharp edges: logos, icons, screenshots of text. Saving a photograph as PNG usually makes it larger, because PNG is lossless and photographs have no repetition for it to exploit.
If you have the format wrong — a photo sitting in a PNG, most commonly — converting it can cut the size by 80% on its own, before any resizing or quality adjustment.
How to tell you went too far
Compression artifacts appear in predictable places, and once you know where to look you cannot unsee them:
- Skies and gradients break into visible blocks or bands.
- Sharp edges — especially text or a logo over a photo — grow a faint halo of noise.
- Dark areas go muddy and lose separation between shades.
Check at 100% zoom, not fitted to the window. And check the actual image, not a thumbnail: everything looks fine at 200 px wide.
Two things that will bite you
Compression is not reversible. The discarded detail is gone. Keep your originals somewhere and compress copies — the day you need a print-resolution version of a photo you squeezed to 400 KB is the day you find out.
Do not re-compress an already-compressed file. Each lossy save compounds on the damage of the last one. If you need a JPEG and you already made a WebP, go back to the original rather than converting the WebP. This is also why an image sometimes gets bigger when you compress it: if it was already squeezed hard, re-encoding adds overhead without finding anything left to remove.
Why any of this matters
Images are usually the majority of a page's weight, which makes them the main thing standing between a visitor and your content. Google's Core Web Vitals measure Largest Contentful Paint — how long the biggest visible element takes to appear — and on most pages that element is an image. Cutting a hero image from 3 MB to 200 KB routinely moves a page from failing that metric to passing it, with nothing else changed.
It is also just polite. Someone on a phone with two bars is paying for every byte you send them.
If you want to do this right now rather than read about it, the image compressor does both steps at once — set the max width, leave quality at 75, and watch the before-and-after figures. It runs in your browser, so the photo never leaves your computer and there is no upload to wait through.
The format question is the part most people get wrong, and it is worth ten minutes on its own. PNG vs JPG vs WebP walks through which one to reach for and why a screenshot behaves so differently from a photograph — which is exactly the thing that makes PNGs balloon.
Frequently asked questions
How do I reduce image size without losing quality?
Resize before you compress. Cutting a 4000px photo to 1200px removes about 90% of the pixels with no visible difference at display size, which is a far bigger win than any quality slider. Then compress at 75–80%, where artifacts are invisible for photographs.
What is a good file size for a web image?
Under 200 KB for an in-article image and under 400 KB for a full-width hero is a reasonable target. Thumbnails should be well under 50 KB. These are guidelines, not rules — a detailed photograph justifies more than a flat graphic.
Does compressing an image reduce its quality?
JPEG and WebP are lossy, so yes, information is discarded. At 70–80% quality the loss is invisible at normal viewing size. The damage is permanent and compounds with each re-save, so always work from an original you keep.
Why did my image get bigger after compressing it?
Almost always because it was already compressed. Re-encoding an efficient file adds container overhead without finding redundancy to remove. It also happens when a simple graphic that was an efficient PNG gets re-saved as a lossy format.
Is it safe to compress images online?
It depends entirely on whether the site uploads your file. Most do, which means your image sits on someone else’s server under a retention policy you did not read. Tools that process in the browser — including the one on this page — never transmit the file at all.
Last updated September 19, 2026