A plain-English guide to compressing images
There's a lot of jargon around image compression and almost none of it matters day to day. Here's what I'd tell a friend who just wants their files smaller without making them look bad.
Why your images are probably the problem
Whenever someone asks me why their site feels sluggish, images are the first thing I check — and most of the time, that's the whole answer. On a typical page, images make up well over half of everything the visitor has to download. The scripts and fonts everyone frets about are usually a rounding error next to one un-resized hero photo.
The fix is almost insultingly simple. A photo straight off a phone is several megabytes; the version that page actually needs is a few hundred kilobytes. Closing that gap is the cheapest, highest-impact thing you can do for load time — no rebuild, no new framework, just smaller files.
Which format do you actually need?
Ninety percent of decisions come down to one question: is this a photograph, or a graphic?
- A photo — a person, a product, a scene? Use JPEG. It's built for the millions of subtle colours in a photograph and squeezes them brilliantly.
- A logo, icon, screenshot, or anything with transparency or sharp text? Use PNG. It keeps edges crisp where JPEG would smear them.
- Images on your own website and you want them as small as possible? Use WebP — it does either job in fewer bytes, and every modern browser reads it.
Get that one call right and you're most of the way there. The good news is this tool handles all three, so you can just drop the file in and decide later.
Lossy vs lossless, in one breath
You'll see these two words everywhere, so here they are plainly. Lossy (JPEG, WebP) genuinely throws away detail to get small — perfect for photos, where you'll never miss it. Lossless (PNG) keeps every pixel and saves space by storing it more cleverly — perfect for graphics, where a smudged edge would be obvious. That's the entire distinction, and it maps neatly onto the format choice above.
How hard should you push?
More compression isn't automatically better — past a point you're just making the picture worse. Rough guide for where to land:
- The image people will look at closely — a hero shot, a portfolio piece: stay around 80–85 quality.
- Everything in a grid or list — thumbnails, secondary photos: 70–75 is plenty.
- A faint background image: you can push down to 50–60 and nobody will notice.
When in doubt, use the before/after preview above. Your own eyes are a better judge than any number I can give you.
If you remember nothing else
Photo → JPEG. Logo or screenshot → PNG. Your own website → WebP. Aim for about 80 quality, resize to the size you'll actually display, and check the preview. That covers the vast majority of real-world cases.
Written by
Sanjay Sahani — Solution Architect
Sanjay Sahani is a solution architect with 21+ years building software. He created InstaShrink after one too many projects where “just compress the images” meant uploading client photos to a server he didn't control — so this tool does all its work inside your browser instead.
More about InstaShrink →