Image compression guide
How to Compress an Image Without Losing Quality
Published · Reviewed
Smaller files always come from removing redundancy, pixels, precision, or metadata. The practical goal is therefore not a magical zero-cost reduction, but the smallest file that still looks right for its destination.
Lossless and visually lossless are different
Lossless compression reconstructs the same pixel values after decoding. PNG and lossless WebP can do this, but they cannot promise a smaller file for every source.
Lossy JPG or WebP discards information. A moderate setting can look unchanged at normal viewing size even though the decoded pixels differ. That is better described as no visible quality loss, not mathematically lossless compression.
- Lossless: exact decoded pixels, often best for diagrams, text, and repeated editing.
- Lossy: adjustable tradeoff, often best for photographs and final web delivery.
- Metadata removal: can save bytes without changing visible pixels, but removes camera or authorship information.
Start with dimensions before aggressive quality loss
A 4000-pixel camera image is wasteful when a page displays it at 1200 pixels. Reducing width and height lowers the number of pixels the encoder must describe and often saves more bytes cleanly than forcing an extremely low quality setting.
Keep the aspect ratio locked. If the width is halved, the height should normally be halved too.
4000 × 3000 JPEG used in a 1200-pixel content columnAfter1200 × 900 JPEG or WebP at a moderate qualityNoteThe smaller export can look equivalent in that layout because the discarded source pixels were never displayed.
Match the format to the image
JPG is a dependable choice for opaque photographs. PNG is useful for sharp interface art and transparency, but photographic PNG files can be large. WebP supports lossy and lossless coding plus transparency, making it useful for modern web delivery.
Do not convert an already lossy image to a lossless format expecting lost detail to return. The new file can be larger while preserving only the artifacts already present.
- Photograph without transparency: test JPG and lossy WebP.
- Logo, screenshot, or line art: test PNG and lossless WebP.
- Transparent photographic composite: test WebP; JPG requires a solid background.
Use a repeatable quality check
Compare the original and result at 100% zoom around faces, text, high-contrast edges, gradients, and fine textures. Then inspect the image at the size people will actually see.
If artifacts are visible, increase quality or dimensions. If the file is still too large, make one controlled change at a time so you know what caused the difference.
- Check the reported byte size after the actual export.
- Preview transparency against both light and dark backgrounds.
- Open the downloaded file rather than trusting a canvas preview alone.