When an image is too large, first decide whether its pixel dimensions exceed the real use or whether encoding quality is unnecessarily high. Both are called compression, but they affect clarity very differently.
Resize first or reduce quality first?
Dimensions far exceed the display area
Resize first. A page showing an image at 1,200 px does not need a 4,000 px original; removing unused pixels often cuts size while preserving natural detail.
Dimensions are already appropriate
Then adjust JPG quality or choose a more efficient format. Starting with aggressive quality loss can create blocks around faces, text and gradients.
How should JPG, PNG and WebP be chosen?
| Format | Best for | Watch for |
|---|---|---|
| JPG / JPEG | Photos, complex gradients and general web images | No transparency; repeated saves lose more detail |
| PNG | Screenshots, interface text, logos and transparency | Large photographs are often much bigger than JPG |
| WebP | Efficient web photos or transparent images | Old software and some upload forms accept only JPG/PNG |
The current QuickCalc tool exports JPG or PNG. WebP is included as format-selection guidance and is not yet an output option.
A practical workflow for web photographs
- Find the page's real display size and high-density-screen needs.
- Reduce the longest edge to a sensible range, often no more than 1,600 px for a content image.
- Export JPG and inspect faces, hair, text and gradients.
- Compare the resulting KB; keep the original when the export is larger.
How should a transparent logo be handled?
Keep PNG or use a transparent WebP. JPEG fills transparent pixels. If the PNG is too large, remove unused transparent margins and resize to the display dimensions instead of sacrificing edge clarity.
Why are screenshots poor candidates for low-quality JPG?
Text, thin lines and flat colour edges develop blur and ringing under lossy compression. Try PNG first, then compare WebP where the destination supports it.
Why can the processed file become larger?
- The source was already well optimised.
- A JPG was converted to lossless PNG.
- Dimensions stayed unchanged while export quality remained high.
- Flat graphics and complex photos respond differently to each codec.
Editorial note: always retain the original
Resizing and lossy compression remove detail that enlargement cannot restore. Compare dimensions, format, KB and visible quality instead of chasing the smallest number alone.
Is the image uploaded?
The QuickCalc tool uses the browser File API and Canvas to read, resize and create the download locally; it does not send the image to this site's server. Processing still uses device memory, so input is limited to 20 MB.
Image-processing questions
Why does quality barely change PNG size?
PNG is normally lossless, while JPG responds directly to a lossy quality setting. Pixel dimensions and content type matter more for PNG.
Can the original quality be restored?
No. Detail removed by resizing or lossy encoding does not return when the file is enlarged.
Why are phone photos often so large?
Phones store far more pixels and metadata than a typical web display needs, so reducing the longest edge is often more effective than heavy quality loss.
Process an image or read the technical references
Use the image compression tool · MDN image format guide · MDN Canvas toBlob
Written and reviewed by the QuickCalc editorial team. Last reviewed: 8 Sep 2026. Report a rule or calculation issue at w56975828@gmail.com.