Choosing the right image format is the single biggest lever you have over image file size on the web. The same photograph saved as a PNG can be ten times bigger than the same image saved as a WebP — and for almost every use case, one of those formats is clearly correct. Here's a no-nonsense guide to JPG, PNG and WebP, and which to pick for what.
The quick answer
- Photographs (people, landscapes, products): WebP first, JPG as a fallback.
- Logos, icons, screenshots, anything with sharp edges or transparency: WebP first, PNG as a fallback.
- Maximum compatibility (email, old systems, prints): JPG for photos, PNG for graphics.
WebP is supported in every browser released since 2020, including Safari, so "modern web" really does mean WebP-first now. The rest of this article explains why.
JPG: the workhorse for photos
JPG is a lossy format designed in 1992 specifically for natural photographs. It excels at compressing the soft gradients of skin, sky and landscape, and it's supported literally everywhere.
Strengths: small file size for photos, universal compatibility, hardware-accelerated decoding on every device.
Weaknesses: visible blocky artefacts on hard edges and flat colour areas, no transparency, no animation.
Use it for: photographs where compatibility matters more than the last 25% of file size — email attachments, older CMS platforms, print workflows.
PNG: the right choice for graphics
PNG is a lossless format designed for crisp, computer-generated images. Logos, icons, UI screenshots and anything with transparency almost always belong in PNG (or its modern replacement, WebP).
Strengths: lossless compression (no artefacts), full alpha transparency, predictable behaviour for sharp edges.
Weaknesses: very poor compression for photographs — a PNG photo can be 5 to 10 times bigger than the JPG equivalent. No animation (well, APNG exists but support is patchy).
Use it for: logos, icons, illustrations, screenshots, anything that needs transparency, anywhere a small amount of degradation would be visible.
WebP: the modern default
WebP, designed by Google and released in 2010, replaces both JPGand PNG with a single format that does both jobs better. It supports lossy and lossless compression, full alpha transparency, and animation.
Strengths: 25–35% smaller than JPG at the same perceptual quality for photos, often 25%+ smaller than PNG for graphics, supports transparency, supports animation, supported by every modern browser.
Weaknesses: not universally supported in non-browser contexts (some older email clients, image editors, print pipelines still struggle with it).
Use it for: any image you control on a modern website. Serve a JPG or PNG as a fallback only if you genuinely need to support pre-2020 browsers.
Side-by-side comparison
Roughly speaking, for a typical 1920×1280 photograph at the same visible quality:
- PNG: ~3.5 MB
- JPG (quality 80): ~350 KB
- WebP (quality 80): ~240 KB
Numbers vary with the image, but the ordering almost never does. WebP wins on file size, JPG wins on universal support, PNG wins on graphic-style content where lossy compression isn't acceptable.
What about AVIF?
AVIF is the next-generation format after WebP. It compresses about 20% smaller again, but encoding is slow and tooling is less mature. For most teams, WebP is the right place to settle today; revisit AVIF when your CMS or build pipeline supports it natively.
Choosing for your use case
- WordPress / Ghost / Substack: WebP. Most modern themes auto-serve it.
- E-commerce product photos: WebP with a JPG fallback via a
<picture>element. - Marketing site hero image: WebP, definitely. Compressed properly this is the easiest big LCP win you can ship.
- App screenshots in docs: WebP or PNG. Avoid JPG — you'll see compression artefacts on the UI text.
- Email newsletter: JPG for photos, PNG for logos. WebP support in email is improving but still inconsistent.
How to convert between formats
Our free online image compressor keeps the original format (JPG stays JPG, PNG stays PNG, WebP stays WebP) but compresses each to web-friendly sizes. For format conversion specifically, most desktop image apps and CMS plug-ins handle JPG ↔ WebP automatically these days.
The takeaway
Default to WebP for anything you control on a modern website. Fall back to JPG for photos and PNG for graphics where compatibility matters. And whatever format you pick, make sure you're actually compressing — a poorly-compressed WebP can still be bigger than a well-compressed JPG.