Maintained by Image Reshaper · Updated
JPG vs PNG vs WebP: Which Format Should You Use?
A direct comparison of the three formats every website and upload form expects, with a decision table and the trade-offs that actually matter.
Choose for the image and the destination
For photos, start by comparing JPG and WebP at a readable quality. For flat graphics or screenshots, compare PNG and WebP. For transparency, choose PNG or WebP: JPG always needs a background.
The measured examples below use a synthetic textured raster, a flat graphic and a transparent graphic. The texture exercises a detailed encoder workload, but it is not a photograph and these figures are not a photo benchmark. Your own photo may behave very differently.
Run the comparison on your own file
A quality value of 80 is an encoder setting, not an 80% file-size promise. JPG and WebP do not interpret that number identically, and browser encoders may differ. PNG ignores the lossy quality setting.
Converting an already compressed JPG to PNG prevents another lossy export but does not reconstruct missing detail. The PNG can be much larger.
- Open Image Converter and select your source.
- Choose PNG, JPG or WebP. For JPG, choose a background color for transparent areas.
- Convert and compare file size, edges, text and gradients at actual size.
- Download the format the receiving site accepts; do not just rename its extension.
Try our measured examples
Created and tested on 2026-10-06 in Chrome 154.0.8037.98. These images were generated by this project. Results vary with source content and browser encoder; no camera photograph was used.
| Example | Original bytes | Output bytes | Dimensions | Quality |
|---|---|---|---|---|
| texture-80.jpg | 2,457,363 | 463,140 | 1200 × 800 | 80% |
| texture-80.png | 2,457,363 | 2,457,363 | 1200 × 800 | Not applicable |
| texture-80.webp | 2,457,363 | 472,872 | 1200 × 800 | 80% |
| graphic-80.jpg | 38,173 | 22,329 | 1200 × 800 | 80% |
| graphic-80.png | 38,173 | 38,173 | 1200 × 800 | Not applicable |
| graphic-80.webp | 38,173 | 8,442 | 1200 × 800 | 80% |
| transparent-80.jpg | 38,158 | 22,310 | 1200 × 800 | 80% |
| transparent-80.png | 38,158 | 38,158 | 1200 × 800 | Not applicable |
| transparent-80.webp | 38,158 | 8,554 | 1200 × 800 | 80% |
Download the originals: textured JPG, textured PNG, flat graphic, transparent graphic. Run them through the tool to compare your browser’s result.
Method: deterministic Canvas-generated 1200 × 800 sources, the production renderImage/compressToMaxBytes functions, quality 80 for format comparisons, and an automatic bounded search for byte targets. Resize examples export PNG. No measurements of network speed or field Core Web Vitals are implied.