Many forms, job portals and content systems still cap uploads at 100 KB. Slow web pages are the other common reason. The trick is to change things in the right order, because the first step usually does most of the work.
1. Reduce the pixel dimensions first
File size grows with the number of pixels. A photo straight from a phone is often 3000 pixels wide or more, but a blog column rarely shows it wider than 800 to 1200 pixels. Halving the width and height leaves a quarter of the pixels, and typically a file that is a fraction of the size, before any quality is lost at all.
Ask where the image will be shown. If it appears 600 pixels wide on screen, a 1200 pixel version is enough for sharp display on high-density screens. Anything larger is wasted bytes.
2. Choose the format that suits the picture
- Photographs: JPG or WebP. Both use lossy compression that suits smooth gradients and noise.
- Screenshots, logos, text, flat colour: PNG, or WebP in lossless mode. JPG makes ringing artefacts around sharp edges.
- Needs transparency: PNG or WebP. JPG cannot store transparency.
If a photo is saved as PNG, converting it to JPG or WebP is often the single biggest saving. See WebP vs JPEG vs PNG for the details.
3. Lower quality only as far as needed
For JPG and WebP, quality settings between about 70 and 85 usually look the same as the original at normal viewing size while being much smaller than quality 95 to 100. Go down in small steps and compare the before and after preview, zooming in on faces, text and smooth sky, where artefacts show first.
4. For PNG, reduce the number of colours
PNG is lossless, so there is no quality slider. The way to shrink a PNG is to store fewer distinct colours (a palette). Our compressor does this in the browser, and the effect depends heavily on the picture.
As an example, we took one synthetic test image: a 1200 by 800 photo-like PNG of 1,818,854 bytes. The results were:
| Setting | Size |
|---|---|
| 256 colours, with dithering | 639,469 bytes |
| 64 colours, with dithering | 519,961 bytes |
| 64 colours, no dithering | 282,604 bytes |
Dithering scatters pixels of nearby colours so gradients look smoother, but it costs size. A flat logo with few colours will compress far better than this test image, and a real photograph will behave differently again, so treat these numbers as an illustration of the trade-off, not a promise.
5. Still too big? Combine the steps
If a photo is still over 100 KB, reduce the width again, then convert to WebP or JPG at quality 70 to 75. For a 100 KB target, a typical web photo about 800 to 1000 pixels wide often lands in range, but it depends on how detailed the image is. A busy scene with foliage compresses worse than a portrait against a plain wall.
Check the result
Always compare against the original at the size people will actually see it. Metadata such as camera details and GPS location is removed from the compressed copy, which also saves a few kilobytes and protects your privacy. Everything happens in your browser, so the image is not uploaded to a server.