WebP vs AVIF vs JPEG: which format should you export?

web.dev’s format guide is the right starting point: prefer modern formats when the audience can decode them, keep JPEG when you need universal still-photo support, and keep PNG (or lossless WebP) when you need sharp UI and transparency. StackImage can write JPEG, PNG, WebP, and AVIF in the browser. It cannot write HEIC.

A short decision path

• Photographs for email, Word, or a stubborn CMS: JPEG.
• Photographs for a modern site: WebP first, AVIF if you already have a JPEG/WebP fallback.
• UI, logos, screenshots with type: PNG or lossless WebP. Do not JPEG a screenshot.
• Animation: GIF in, PNG frames out if you need stills. We are not a video encoder.
• iPhone original: decode HEIC, then pick JPEG or WebP for the destination.

What the formats actually are

JPEG

The still-photo default since the 1990s. Lossy, no alpha, everywhere. JPEG.org maintains the family. Fine detail and text suffer at low quality. Fine for camera photos.

PNG

Lossless, with alpha. The W3C PNG spec is the reference. Photographs as PNG are usually wasteful. Screenshots and logos are the job.

WebP

Google’s format with lossy and lossless modes and alpha. WebP docs and Can I use: WebP show why it is the safe modern default in 2026.

AVIF

AV1 in an HEIF-like container. Often smaller than WebP at a similar look, slower to encode. AVIF on GitHub (AOMedia) and Can I use: AVIF are the two tabs to check before you make it your only format.

What StackImage will not do

We encode with the browser’s codecs, not a custom mozjpeg or rav1e build. Encode time and quality follow the device. If you need a two-hour AVIF effort setting for a homepage hero, use Squoosh or a build step. If you need HEIC out, use Apple’s tools.

Sources