An image compressor is most useful when it helps you make a deliberate decision about a file. The goal is not to apply the same setting everywhere; it is to produce a file that is appropriate for its display size, format and purpose.
Start with the destination
A hero image, product thumbnail, email attachment and editable source file have different requirements. Determine where the image will be displayed, how wide it will appear, whether it needs transparency and which applications must open it.
Choose dimensions before fine-tuning quality
If an image is several times wider than its display area, reducing its dimensions can avoid sending unnecessary pixels. Use the layout’s actual CSS size and account for high-density screens when needed. Confirm that the resized version still contains readable text and useful detail.
Choose a format for the content
JPEG is commonly used for photographs, PNG for precise graphics or transparency, and WebP or AVIF when the receiving environment supports them. SVG is appropriate for many vector icons and diagrams. The destination’s compatibility requirements should decide the final format.
Verify instead of trusting a percentage
Compare input and output bytes, dimensions, format, transparency and visual detail. Test the downloaded file where it will be used. Results vary by image content, browser, device and settings, so a single percentage cannot describe every file.
Keep a simple production checklist
Keep the original, use descriptive filenames, avoid repeated lossy exports, and record the setting used for the published copy. For a batch, test representative files before processing the rest and isolate failures rather than ignoring them.
A compact decision matrix
| Need | Start with | Verify |
|---|---|---|
| Website photograph | Display dimensions and a tested lossy format | Rendered sharpness and page loading |
| Logo or screenshot | Transparency and edge preservation | Text, alpha channel and destination compatibility |
| Archive or source | Preserve the original | Future editability and metadata needs |
What a good result looks like
A good result meets the destination’s visual and technical requirements and can be reproduced from a known source and setting. It may be smaller, similar in size or occasionally larger than the input. The decision should be based on the verified output rather than the interface’s default setting.
Acceptance details
A result is acceptable only when it meets the destination requirement, opens correctly and passes the visual or technical check described above. The output may be smaller, similar in size or larger than the source; record what actually happened instead of replacing the observation with a target percentage.
A three-pass workflow
- Classify the file: decide whether it is a photograph, screenshot, transparent graphic, illustration or source asset.
- Fit the dimensions: compare the intrinsic size with the layout or destination that will display it.
- Test the encoding: compare an output at the intended size, inspect visible detail and confirm that the receiving application opens it.
Changing all three variables at once can make the result difficult to explain. When quality matters, change one setting at a time on a copy and keep the original available.
When not to optimize the source
Do not use a delivery copy as the new master file. Avoid overwriting an editable source, an image needed for future crops or a file whose metadata is part of the workflow. For a signed, regulated or sensitive document represented as an image, obtain the owner’s approval before changing the file.
A record another person can review
Write down the source filename, destination, dimensions, format, settings, input and output bytes, visual checks and compatibility result. Someone else should be able to understand why the output was accepted and reproduce it without relying on a marketing percentage or an undocumented default.
Sources and further reading
web.dev: Image performance discusses dimensions, responsive images, formats and measurement. MDN: Image file type and format guide provides format-specific details.