Big images slow your website, clog your inbox and eat up storage. The good news: most pictures can shrink by 60 to 90 percent with no difference you can see. This guide explains how image compression works and exactly which settings to use.
Lossy vs lossless compression
There are two ways to make an image file smaller.
- Lossless compression rearranges the data so it takes less space but restores perfectly. PNG is lossless. You get an identical picture, but savings are modest.
- Lossy compression throws away detail that the human eye barely notices. JPG and WebP can be lossy. Savings are huge, and at sensible settings the picture still looks the same.
For photos, lossy is almost always the right choice. For logos, screenshots and graphics with sharp text, lossless (or a smart colour reduction) works better.
The three biggest wins, in order
- Resize first. A 4000 pixel wide photo from a phone is far larger than any screen needs. Cutting it to 1600 or 1920 pixels wide can reduce the file by 80 percent before you even touch quality. Use the Image Resizer or the max width option in the Image Compressor.
- Lower the quality slightly. For JPG and WebP, a quality of 70 to 85 percent is the sweet spot. Below 60 you start to see blockiness around edges.
- Choose the right format. WebP is usually 25 to 35 percent smaller than JPG at the same visual quality. Use JPG to WebP when your site and audience support it.
Best settings by image type
| Image type | Format | Quality | Notes |
|---|---|---|---|
| Photographs | JPG or WebP | 75 to 85 | Resize to 1600 to 2000 px wide |
| Screenshots | PNG (colour reduced) or WebP | n/a | Text stays sharp |
| Logos and icons | SVG or PNG | lossless | Keep transparency |
| Hero banners | WebP | 70 to 80 | Under 200 KB if you can |
| Thumbnails | JPG or WebP | 70 | 400 to 800 px wide |
How to compress an image step by step
- Open the Image Compressor.
- Drop in one picture or a whole folder.
- Keep the format on “Keep original”, or switch to WebP for the smallest files.
- Move the quality slider to about 75 percent and, if the picture is large, set a maximum width.
- Compare the before and after sizes shown on each row, then download.
The whole thing runs in your browser, so nothing is uploaded and there is no limit on file size or number of images.
Why PNG files barely shrink and what to do about it
PNG stores every pixel exactly, so simply “lowering the quality” does nothing. Two things help: reduce the number of colours (like TinyPNG does) or convert to WebP. A screenshot with a few flat colours often drops by 70 percent when its palette is reduced from millions of colours to 256, with no visible change. The PNG Compressor does this automatically and keeps transparency.
Common mistakes to avoid
- Compressing an already compressed JPG repeatedly. Every re-save loses a little more detail. Always compress from the original.
- Using the wrong format. Saving a photo as PNG makes it huge, and saving a logo as JPG makes the edges fuzzy.
- Forgetting metadata. Phone photos carry hidden camera and GPS data. Remove EXIF data to save a few kilobytes and protect your privacy.
- Enlarging after compressing. Always resize down, never up.
How small should my images be?
- Web page images: under 200 KB each if possible
- Blog post pictures: 100 to 300 KB
- Email attachments: under 1 MB each
- Online forms: follow the stated limit, for example 20 KB or 100 KB
Quick checklist
- Resize to the largest size you actually need
- Use JPG or WebP at 75 to 85 percent quality for photos
- Use colour-reduced PNG or WebP for graphics
- Strip metadata
- Keep the original file as a backup
With these steps you will rarely see a quality difference, but your pages will load faster and your files will be a fraction of the size.
A simple workflow that works every time
- Resize first. A 4000 px wide photo shown at 800 px wastes most of its pixels. Use the image resizer to match the size you actually display, then compress.
- Pick the right format. Photos belong in JPG or WebP, flat graphics and screenshots in PNG, and anything with transparency in PNG or WebP.
- Compress once, from the original. Re-compressing an already compressed JPG stacks artefacts. Keep the untouched original and export from it every time.
- Compare at 100% zoom. Look at faces, text edges and gradients. If you cannot see a difference there, you will not see one on the page.
Quality settings that are usually safe
| Image type | Starting point | Notes |
|---|---|---|
| Photo, JPG | 75 to 82 | Below 70 you start to see blocky skies and smeared skin |
| Photo, WebP | 75 to 80 | Typically 25 to 35 percent smaller than JPG at the same look |
| Screenshot, PNG | Colour reduction | Cutting to 256 colours often saves 60 percent or more |
| Logo, SVG | Optimise | Remove metadata and round coordinates |
Mistakes that ruin quality
- Saving a screenshot as JPG. Text gets fuzzy halos. Keep screenshots as PNG and use the PNG compressor.
- Upscaling a small image to hit a size target. Compression cannot add detail that is not there.
- Exporting at quality 100. The file is huge and looks the same as 85.
- Ignoring metadata. Camera data, thumbnails and colour profiles can add tens of kilobytes. Remove EXIF data before publishing.
Check your result
Aim for hero images under 200 KB, content images under 100 KB and thumbnails under 30 KB. If a page still feels slow, read our guide to image optimization for faster websites.
Frequently asked questions
What is the best quality setting for JPG compression?
For most photos a quality of 75 to 85 percent gives a big size reduction with no visible loss. Below 60 percent, blockiness and blurry edges start to appear, especially around text and sharp contrasts.
Does compressing an image reduce its dimensions?
No. Compression changes how the pixels are stored, not how many there are. To reduce dimensions you need to resize the image, which also reduces the file size a lot.
Can I compress an image more than once?
You can, but each lossy re-save removes a little more detail. It is better to keep your original and compress from it once with the settings you want.
How do I compress many images at once?
Add them all to a bulk compressor such as the one on this site and download the results as a single ZIP. Everything stays on your device.
