JPG vs PNG vs WebP vs AVIF — which image format should you pick?
Pick between JPG, PNG, WebP and AVIF using four axes: compression scheme, file size, browser support, and transparency. Includes a browser-only conversion path between them.
Four axes that drive the decision
Picking an image format is not a search for “the best one” — it is a question of what you can afford to give up. Four axes carry most of the weight. Compression scheme (lossless vs lossy) determines whether the format is at home with photographs or with graphics. File size drives bandwidth bills, page load times, and storage. Compatibility matters as soon as the file leaves your laptop — a Word document, an older browser, a print shop, or a stock-image platform may refuse anything fancy. Transparency is non-negotiable for logos, UI assets, and composites.
The trade-off you optimise for changes the answer dramatically. A social post is mostly about compatibility; a mobile-first web page is mostly about size; a brand asset has to keep its transparent edges. There is no one-dimensional ranking where AVIF wins everything.
Side-by-side comparison
| Property | JPG | PNG | WebP | AVIF |
|---|---|---|---|---|
| Compression | Lossy | Lossless | Lossless + lossy | Lossless + lossy |
| Photo file size | Baseline (100%) | 200-400% | 70-80% | 50-65% |
| Transparency | No | Yes (8-bit) | Yes (8-bit) | Yes (10-bit / 12-bit) |
| Animation | No | No (APNG extension) | Yes | Yes |
| Compatibility | Everywhere | Everywhere | Modern browsers; not IE | Modern only, Safari 16+ |
| Print workflows | OK | OK | Spotty (depends on shop) | Generally rejected |
| Editing software | Photoshop / Illustrator / everything | Same | Sometimes limited | Limited |
| Year introduced | 1992 | 1996 | 2010 (Google) | 2019 (AOMedia) |
The “photo file size” row uses JPEG quality 80 as the baseline. WebP typically lands around 70 % of the JPEG size for the same perceived quality, and AVIF around 50–65 %. The picture flips for low-colour content — screenshots and logos can be smaller as lossless PNG than as lossy JPEG, so format choice is also driven by image content.
Use case → recommended format
Social posts, email attachments, internal sharing: JPG. Platform-side re-encoding is going to happen anyway, so spending effort to ship WebP or AVIF is largely wasted, and the recipient may struggle to open anything else.
Photos on your own site: AVIF first, WebP fallback, JPG last fallback inside a <picture> element. Older Safari only handles WebP, so the three-way fallback is the safe move. The size reduction can exceed 50 %, with a noticeable LCP (Largest Contentful Paint) improvement.
Logos, screenshots, transparent assets: PNG. Lossless compression and reliable transparency, with the broadest tool support. WebP and AVIF support both, but design-tool import paths are not as battle-tested.
Print submission: JPG (photos) or PNG (logos, diagrams). Print workflows including CMYK conversion typically reject WebP and AVIF outright.
How to convert in the browser
Knowing which format you want still leaves the conversion problem — the file you have is rarely already in the format you want. image-convert converts between JPG, PNG, WebP, AVIF, GIF, BMP, and TIFF locally, with quality settings exposed. Unlike upload-style converters, there is no code path that ships your photo or work-in-progress to a server.
Watch out for lossy → lossy re-encoding. Going JPG → WebP → AVIF or any chain of lossy steps quietly accumulates compression artefacts (blocking, mosquito noise, banded gradients). If the original image is still in your hands, convert once from the original to the target format, never through intermediate lossy stops. If you also want to strip EXIF, follow with image-exif-strip; if you need to shave more bytes after conversion, use image-compress. The source is auditable on GitHub, and the DevTools Network tab makes it easy to confirm the image never travels off-device.