File formats
JPG vs PNG vs WebP: which format makes images smaller?
By ResizeFox · Published
Format choice matters as much as a compression percentage. JPG is often practical for photographs, PNG preserves lossless pixel data and transparency, and WebP can encode both photographic and lossless-style images. The smallest file is not necessarily the best file if the receiving platform does not support it or critical details become unclear.
Quick reference
| Use | Size or purpose | Note |
|---|---|---|
| JPG | Photographs | Lossy compression; no alpha transparency |
| PNG | Text, screenshots, logos | Lossless; alpha transparency |
| WebP | Photos and transparent graphics | Can be lossy or lossless; check destination support |
Step by step
- Identify the content: detailed photograph, screenshot with tiny text, or design with transparent edges.
- Check the upload destination's permitted file types before converting anything.
- Keep a master copy. Export a JPG, PNG and WebP test at the same pixel dimensions where possible.
- Compare byte sizes for the actual exported files and inspect each at 100% zoom and at its intended display size.
- Choose the smallest supported version that preserves what the audience needs to see, rather than declaring one format universally best.
Photographs: why JPG and WebP often win
Photographs contain gradual tone transitions and many colors. Lossy JPG or WebP encoding can reduce file size by discarding subtle information that is hard to notice at the intended display size. Increase compression too far and you may see blockiness, smudged texture and color artifacts.
For product photos, inspect labels, stitching and material texture. A smaller file that hides a product feature is not an improvement. Keep the full-size original so you can repeat the export with better settings.
Screenshots and logos: preserve sharp edges
Screenshots often have flat color areas, sharp borders and tiny characters. PNG may compress this kind of content well while preserving exact pixels. JPG can introduce fringes around the edges of letters. WebP may be worth comparing, especially when supported by the target application.
Transparency is another key difference. JPG cannot preserve transparent pixels. PNG does, and WebP can too; always inspect the actual downloaded copy on both light and dark backgrounds.
Run a fair size comparison
Do not compare a 2400-pixel JPG to a 600-pixel WebP and credit all of the difference to the format. Hold the dimensions and source content constant, then compare the encoded sizes and visible quality. If the formats differ in transparency handling, document that as part of the result.
ResizeFox's Compression Lab provides original sample patterns for checking how fine text, smooth gradients and transparent artwork behave. Use its outputs as examples, not as a prediction of what every photograph will do.
See the tradeoffs yourself in the Image Compression Lab: compare text, gradients and transparent graphics with downloadable results.
Sources and further reading
Platform specifications and application rules can change. Refer to the current destination instructions; the worked calculations and preparation choices in this tutorial are not a guarantee of acceptance.