A photo straight from a modern phone weighs 3–8 MB. Multiply that by the images on a web page or an email with a dozen vacation photos, and slow uploads, full inboxes and sluggish websites follow. Image compression solves this — but doing it well means understanding what actually makes images large. This guide gives you the mental model and a repeatable workflow, all doable locally in your browser.
What makes an image file large?
Three factors, in order of impact:
- Resolution. A 4000×3000 image has 12 million pixels. Halve each side and you keep 3 million — roughly a quarter of the size before compression even kicks in.
- Format. PNG stores every pixel losslessly, which is perfect for screenshots and logos but wasteful for photos. JPG and WebP store photos far more efficiently by discarding detail your eye barely notices.
- Quality setting. For JPG and WebP, the quality slider controls how aggressively detail is discarded. The sweet spot for photos is usually 75–85%; below ~60% you start seeing blocky artifacts around edges.
Choosing the right format
Photos (people, landscapes, anything from a camera): use JPG, or WebP if the destination supports it — it typically saves another 20–30% at the same visual quality.
Screenshots, logos, diagrams, text: use PNG. Lossless compression keeps sharp edges crisp; JPG turns crisp text edges into fuzzy noise.
Transparency: PNG or WebP. JPG has no transparency channel — a transparent logo saved as JPG gets a white (or black) box behind it.
When in doubt, the image converter lets you re-encode the same picture in several formats and compare file sizes directly.
The resize-first rule
The single most effective compression step is not a compression setting at all — it is sending fewer pixels. Ask where the image will be used:
- Website content column: 1200–1600 px wide is plenty.
- Email attachment meant to be viewed on screen: 1600–1920 px wide.
- Full-screen wallpaper or print: keep original resolution.
Run your image through the image resizer first, then compress. A 4000 px photo resized to 1600 px and saved at quality 80 is typically 15–25× smaller than the original — with no difference you can see at normal viewing size.
A repeatable browser workflow
- Open the image compressor and drop in your photos. Nothing is uploaded — the work happens on your device.
- If the destination is a website or email, resize to the target width first.
- Pick the format per the rules above. Compress the photo set as JPG/WebP; leave screenshots as PNG.
- Compare before/after at 100% zoom on a detail-rich area (text, faces, patterned fabric). If artifacts appear, step the quality up 5–10 points.
- Download and check the final size. For web use, aim for under ~200 KB per photo.
Common mistakes
Compressing an already-compressed JPG again and again. Every JPG save generation loses a little quality. Keep your original, and always compress from the source file.
Using PNG for photos "to avoid quality loss". The loss you avoid is invisible; the size you pay is 5–10×. Reserve PNG for graphics with flat colors and sharp edges.
Chasing 100 KB. For most uses, a 300 KB image that looks perfect beats a 90 KB one with visible artifacts. Compress to the purpose, not to a magic number.
The bottom line
Image compression is not one lever — it is resize → format → quality, in that order. Do those three steps locally in your browser and you will routinely cut image weight by 90% or more with no visible difference, no uploads, and no software to install.