1. Home
2. Image formats

Image Formats Compared: JPEG, PNG, WebP and AVIF

Four formats cover more than 99% of images on the modern web. They make very different trade-offs between compression, transparency, animation and browser support. Here is a practical guide to choose the right one.

JPEG — the universal baseline

How it works

JPEG (short for Joint Photographic Experts Group) was standardized in 1992 and is the oldest of the four formats. It uses a lossy discrete cosine transform on 8×8 pixel blocks, followed by quantization and entropy coding. Quality is controlled by a single number from 1 to 100. Modern encoders like MozJPEG squeeze 10–20% more out of the format without changing the bitstream, so every JPEG decoder can read them.

Best for

Photographic content with smooth tonal gradients and plenty of detail — portraits, landscapes, product photography, hero images.

Pros

• Supported by literally every image viewer on the planet.
• Hardware-accelerated decoding almost everywhere.
• Mature ecosystem of optimizers (MozJPEG, jpegli).

Cons

• No alpha channel — backgrounds must be flattened.
• Blocky artifacts on text, line art and sharp edges.
• 8 bits per channel only.

PNG — lossless and transparent

How it works

PNG (Portable Network Graphics) was created in the mid-1990s as a free, patent-unencumbered replacement for GIF. It is strictly lossless: DEFLATE compression on top of per-row pixel filtering. Optimizers like oxipng (the Rust port of optipng) try every filter/compression combination to find the smallest representation without changing a single pixel.

Best for

UI graphics, icons, screenshots, diagrams, line art, logos with flat colors, and anything that needs a true alpha channel.

Pros

• Lossless — pixels survive the round trip intact.
• Full 8-bit alpha, up to 16 bits per channel.
• Universally supported.

Cons

• Large on photographs — often many times bigger than JPEG/WebP/AVIF.
• No animation in the original spec (APNG is a later extension).

WebP — Google's web-first format

How it works

WebP was released by Google in 2010, based on the VP8 video codec and later extended with a separate lossless mode. It supports both lossy and lossless compression in a single container, with optional alpha and animation. In lossy mode it typically beats JPEG by 25–35% at matching quality. In lossless mode it beats PNG by 20–30%.

Best for

General-purpose web delivery when AVIF is not yet safe — photos, UI sprites with transparency, animated GIF replacements, and as a fallback tier below AVIF.

Pros

• One format covers photos, graphics, alpha and animation.
• Significantly smaller than JPEG and PNG for comparable quality.
• Broad support: all evergreen browsers since 2020.

Cons

• 8 bits per channel — no HDR.
• Slower to decode than JPEG on some low-end devices.

AVIF — the current leader in compression

How it works

AVIF (AV1 Image File Format) is a still-image profile of the AV1 video codec, released in 2019 by the Alliance for Open Media. It supports up to 12-bit color, full alpha, HDR, wide gamut and film grain synthesis. The reference encoder (aom-av1 used by libavif) is slow but squeezes out the best compression available today for real-world photos.

Best for

Hero imagery, photo galleries and anywhere bandwidth matters more than CPU time. Works well as the top tier in a <picture> element.

Pros

• Best-in-class compression — commonly 40–60% smaller than JPEG.
• Supports alpha, animation, HDR, wide gamut and 10/12-bit depth.
• Royalty-free and open.

Cons

• Slow to encode — plan for build-time or async encoding.
• Safari only added support in version 16 (2022).
• Less graceful for synthetic graphics than WebP lossless or PNG.

Side-by-side comparison

Which format should I use?

• Photographs, full bleed hero images: AVIF as the primary format, WebP and JPEG as fallbacks via <picture>.
• UI graphics with transparency (icons, logos): PNG for legacy compatibility, WebP lossless for smaller payloads.
• Line art, screenshots, diagrams: PNG (or WebP lossless) — JPEG/AVIF artifacting is unforgiving on sharp edges.
• Replacing animated GIFs: WebP or AVIF — both are dramatically smaller and support real alpha.
• One format for every browser, today: JPEG for photos, PNG for graphics. Not the smallest option, but zero compatibility debt.

In practice you do not have to pick one. Serve AVIF first, WebP second and JPEG or PNG last inside a <picture> element — every browser gets the smallest version it can decode.

Frequently asked questions