You've got three modern options for a photo on the web, and every “ultimate guide” tells you AVIF is smallest so just use AVIF. That's not wrong. It's also not the full picture. The right choice depends on what you're shipping and who's looking at it.
Here's how the three actually compare, and what I reach for in real projects.
the short version
- JPEG — 30 years old, opens literally everywhere, decent compression.
- WebP — around 25–35% smaller than JPEG at the same quality, read by every major browser since 2020.
- AVIF — roughly 50% smaller than JPEG, best quality-per-byte, but slower to encode and still catching up on support.
If you want one rule: use WebP as your default, AVIF for hero images where the bytes matter, and keep a JPEG fallback for anything that has to work on ancient software.
why WebP is the safe default
WebP hits the sweet spot. On a typical photo you'll see a 25–35% drop versus a quality-matched JPEG, and you almost never think about compatibility anymore — Chrome, Edge, Firefox and Safari have all read it for years. Encoding is fast, so batch-converting a folder of product shots takes seconds, not minutes.
For plain photos it's the one I'd hand someone who just wants smaller files without turning it into a research project.
when AVIF is worth it
AVIF is the newest of the three and it compresses harder — about half the size of JPEG at similar quality, and it holds detail in gradients and skies better than WebP does. If you run an image-heavy site and your Largest Contentful Paint is suffering, AVIF on your big above-the-fold images is a real win.
Two honest downsides. Encoding is slower, noticeably so on large images, so it's less pleasant for on-the-fly work. And support, while broad now, still isn't universal — so you want a fallback for the long tail.
where JPEG still belongs
Don't write JPEG off. If a file has to open in a ten-year-old photo viewer, an email client nobody updates, or a print shop's software, JPEG just works. A well-compressed JPEG at quality 75 is also smaller than most people expect and looks great.
what I'd do
For a website: serve AVIF with a WebP fallback and a JPEG last resort. The <picture> element handles this cleanly and the browser picks the best one it can read. For a one-off — you just need a smaller file to email or upload — convert to WebP and move on.
You can convert to WebP or AVIF here in a few seconds. Run the same photo through both and eyeball the size and quality yourself. It's the fastest way to see which one fits your case.