Image compression is one of those things that looks simple until you get a result that is either still huge or now ugly. The trick is knowing what kind of image you have and what it is going to be used for.
Most people approach compression backwards. They worry about the compression setting first and everything else second. In practice, the biggest wins usually come from decisions made before compression even starts — the format, the size, and whether the image needs to be compressed at all.
Start with the right format
Before you compress, make sure the format fits. A photo in PNG is usually larger than it needs to be. A logo in JPG loses quality and may introduce artifacts around sharp edges. Pick the format first, then compress within it.
For photos, JPG or WebP lossy is usually the right place to start. For graphics, logos, screenshots with text, and anything that needs transparency, PNG or WebP lossless is usually better. Choosing the wrong starting format wastes effort — you can compress a PNG photo all you want and it will still be larger than a JPG of the same image at a comparable quality.
Resize before you compress
An image that is 5000 pixels wide will be large no matter how aggressively you compress it. If it will only be displayed at 800 pixels, resize it first. That single step often does more for file size than any compression setting.
A common mistake is compressing a massive original and then letting the browser scale it down. The file is still big, and the browser still has to load all those pixels. Resize to the actual display size or a little above it, then compress.
For example, if an image will be shown at 800px wide on a page, there is no reason to keep a 3000px version. Resize to something like 1000px to leave a little headroom, then compress. The file drops dramatically and the user sees the same image at the size they actually need.
Know your quality threshold
Compression settings are usually a tradeoff between size and quality. The right point depends on the use case.
For print or archival, use high quality. File size matters less than fidelity. For web display, moderate quality is usually fine — most viewers will not notice a small loss at normal screen sizes. For thumbnails and small previews, you can compress more aggressively because the image is shown small anyway.
For images with text or sharp edges, be careful. Compression artifacts show up quickly around text and lines, much faster than they do in photos. A screenshot with text at too low a quality turns muddy in a way that is obvious and ugly.
For web images, the best quality setting is not the highest one — it is the lowest one where the image still looks good at the size it will be viewed. A photo at 85% quality often looks identical to 100% on screen and is noticeably smaller. That is the sweet spot most people miss.
Watch for re-compression damage
Every time you save a lossy image like JPG, you lose a little more quality. If you open a JPG, edit it, and save it again as JPG, you compound the loss. For images you will edit repeatedly, keep a master copy in a lossless format and only export the final version as JPG or WebP.
This is one of the most common ways images get ruined quietly. Someone opens a JPG, crops it, saves it. Opens that, resizes it, saves it again. Opens that, exports it for web, saves it once more. By the end, the image looks soft in ways that never would have happened if they had kept the original and only exported once.
If you are working on an image that will go through several edits, keep the original in PNG or a high-quality master, and only compress at the end.
Use the right tool for the job
Not all compressors are equal. Some focus on speed, some on maximum compression, some on preserving specific details. For browser-based work, a tool that runs locally keeps your images private and avoids uploads. For batch work, a tool that handles multiple files at once saves time.
The best tool is the one that gives you enough control to hit your size target without ruining the result. If a compressor has a preview, use it. If it has multiple levels, test a couple rather than guessing.
For most people, a browser-based image compressor with a few quality levels and batch support is enough. You do not need command-line tools or complex software for everyday compression. What you do need is a tool that lets you see the tradeoff between size and quality instead of forcing one setting on every image.
A practical workflow
- Decide the final display size and resize the image to match.
- Pick the format that fits the content.
- Choose a compression level based on where the image will be used.
- If the tool offers it, preview the result at the size it will actually appear.
- Check critical details — text, edges, faces, logos — for artifacts.
- If the quality is not acceptable, try a lighter level or a different format.
- Save the compressed version and keep the original as a backup.
Common mistakes
- Compressing a PNG photo when JPG or WebP would be smaller and look the same.
- Saving a JPG at a low quality and then editing and re-saving it multiple times.
- Ignoring resize and focusing only on compression.
- Using the same setting for every image instead of adjusting for content and use case.
- Forgetting to check the result at the size it will actually be viewed.
- Compressing an already-compressed image and making it worse instead of going back to the original.
- Assuming smaller is always better — a tiny file that looks bad is a waste of time.
The quality floor
When you compress an image, you are implicitly deciding how much quality the image can lose and still do its job. That job matters. A product photo for an ecommerce site needs to show the product clearly. A thumbnail for a tutorial needs to be readable. A logo needs to stay sharp. A background texture can be much more compressed because nobody is inspecting it closely.
Match the compression to the role. The same image might be saved at different quality levels for different uses — a full-size version for print or download, a web version for the page, and a thumbnail for the gallery. Treating them all the same is a missed opportunity.
A good compression workflow does not treat every image identically. It asks what the image is for, what size it will be shown at, and how much quality that use case can tolerate. Then it compresses to that point, not further.
Wrapping up
Good image compression is not about squeezing every byte out of a file. It is about getting the file as small as possible while keeping the image useful for its job. That usually means choosing the right format, resizing first, and then applying just enough compression to hit your target.
If you do those three things — right format, right size, right quality — you will get better results than most people do by obsessing over compression settings alone. And if you use a browser-based tool that keeps everything local, you get the privacy benefit too.