JPG vs PNG vs WebP vs AVIF: Which Image Format Should You Use?
A no-nonsense comparison of the four image formats that matter today, with clear rules for picking the right one every time.
Image formats are one of those topics where the defaults haven't caught up to reality. Most people still reach for JPG or PNG out of habit, when WebP or AVIF would give them dramatically smaller files at the same quality. Here's what's actually going on, and how to choose.
JPG (or JPEG)
Released in 1992. Lossy compression that works exceptionally well on photographs and other images with smooth colour gradients. Universally supported — every browser, every email client, every operating system since the mid-90s reads it.
Use it for: photographs where you need maximum compatibility (email attachments, legacy systems, print workflows). Avoid it for: screenshots, logos, anything with text or sharp edges (you'll see ugly halos around the edges).
PNG
Released in 1996 as a free alternative to GIF. Lossless compression with full alpha-channel transparency. Larger files than JPG for photos, but pixel-perfect quality and proper transparent backgrounds.
Use it for: logos, icons, screenshots, UI mockups, anything that needs transparency or crisp edges. Avoid it for: photographs (file sizes will be 5–10× larger than JPG with no visible benefit).
WebP
Released by Google in 2010. Supports both lossy and lossless modes, plus transparency and animation. Typically 25–35% smaller than JPG at the same visual quality, and 20–30% smaller than PNG in lossless mode. Supported by every modern browser since 2020.
Use it for: basically everything on the web in 2025. It replaces JPG, PNG, and GIF in one format. Avoid it for: workflows that need to hand off files to non-web tools (some older design software still doesn't support it).
AVIF
Released in 2019, based on the AV1 video codec. The current state of the art for image compression — typically 50% smaller than JPG and 20% smaller than WebP at equivalent quality. Supports HDR, wide colour gamut, and transparency.
Use it for: hero images and large photographs on the web where bandwidth matters and you can provide a fallback. Avoid it for: universal compatibility (encoding is slow, and a small percentage of older browsers still don't support it).
A simple decision tree
- Photograph going on the web? → AVIF with a WebP fallback, or just WebP if you want to keep it simple.
- Photograph going somewhere that isn't a modern browser? → JPG.
- Logo, icon, or screenshot for the web? → WebP lossless.
- Logo, icon, or screenshot for print or non-web tools? → PNG.
- Animation? → WebP or AVIF, never GIF.
What about HEIC?
Apple's HEIC format is excellent technically — comparable to AVIF in efficiency — but support outside the Apple ecosystem is patchy. If someone sends you a HEIC, convert it to WebP or JPG before sharing more widely.
The bottom line
For 95% of use cases on the web today, the right answer is WebP. For everything else, pick based on where the image is going and who needs to open it. Don't agonise over the choice — even a "wrong" modern format is better than an unoptimised file twice the necessary size.