JPEG vs PNG vs WebP vs AVIF: which format should you use?

The short answer

For photos, use WebP with JPEG fallback if you need to support ancient browsers. For graphics with hard edges (logos, screenshots, line art) use PNG. For new projects targeting modern browsers exclusively, AVIF is smaller than WebP at the same visual quality but the encoder is slower.

The rest of this post is the long version: how each format compares on file size, quality, browser support, and feature set, with a decision flowchart at the end.

TL;DR comparison

The "typical file size" row is for a standard photograph at matched perceived quality. Numbers vary by content; gradients and skies compress especially well in WebP and AVIF.

JPEG

JPEG is the format every camera, browser, and image editor has supported for thirty years. It is lossy only, 8-bit per channel, no transparency, no animation. The compression explainer covers exactly how it works.

Use JPEG for:

• Photographs delivered over the web, when you need universal compatibility
• Email attachments and file sharing where the recipient's tooling is unknown
• Anywhere a fallback format is required for <picture> elements serving WebP or AVIF

Avoid JPEG for:

• Screenshots and graphics with text
• Logos and line art
• Anything that needs transparency
• Archival storage (use PNG, TIFF, or the original RAW)

The biggest practical limitation of JPEG in 2026 is that newer formats produce smaller files at the same visual quality. Sticking with JPEG for new content means paying a bandwidth tax of 30%–50% for compatibility with browsers that almost no one uses anymore.

If your existing site is on JPEG and you want to test alternatives, the quality settings guide covers how to tune JPEG quality before reaching for a new format.

PNG

PNG is a lossless format. The encoded file decodes back to the exact same pixels. It supports 1-bit through 16-bit per channel color, full transparency (8-bit alpha), and a palette ("indexed") mode that produces tiny files for graphics with few colors.

There is no quality setting on PNG, just compression effort. A higher effort level produces a smaller file but takes longer to encode. The decoded image is identical either way.

Use PNG for:

• Screenshots
• Logos, icons, and graphics with hard edges
• UI elements
• Anything that needs precise pixel preservation
• Source files you plan to edit (no generational loss)

Avoid PNG for:

• Photographs delivered over the web (use WebP or JPEG; PNG is 5–10× larger)
• Animation (use WebP, AVIF, or video)

PNG's lossless guarantee is what makes it the right answer for source files. If you save a PNG, open it, and save it again, you get the exact same bytes back. Compare with JPEG, where every save accumulates generational loss.

Optimization tools like pngquant (lossy, palette-based) and oxipng (lossless, removes redundant data) can cut PNG file sizes by 60%–80% without visible quality changes. For lossy palette quantization to make sense, the image needs to have a limited number of distinct colors (typical of graphics, atypical of photographs).

WebP

WebP shipped from Google in 2010 as a replacement for both JPEG and PNG. It supports lossy compression (based on the VP8 video codec), lossless compression, alpha transparency in both modes, and animation. The maximum bit depth is 8 in lossy mode, up to 10 in lossless.

The compelling sales pitch is file size. At matched perceived quality:

• Lossy WebP is typically 25%–35% smaller than JPEG
• Lossless WebP is typically 20%–30% smaller than PNG

Browser support is universal as of 2026. Every major browser (Chrome, Firefox, Safari, Edge, Opera) has supported WebP for years.

Use WebP for:

• Photographs on modern web pages
• Graphics with transparency
• Lossless source files where you want smaller than PNG
• Almost everything that used to be JPEG or PNG

Limitations:

• No HDR
• 8-bit lossy mode is fine for typical web content but inadequate for color-critical work
• Native macOS image handling caught up around 2021, so older saved files from third-party tools sometimes lose Exif

The main reason not to use WebP in 2026 is that AVIF is even smaller, at the cost of a slower encoder. If encode time matters (build pipelines, on-the-fly compression), WebP is the pragmatic choice.

AVIF

AVIF is a still-image format based on intra-frame coding from the AV1 video codec. It was specified in 2019 and gained universal browser support in 2022. It supports lossy and lossless modes, alpha, animation, 8/10/12-bit per channel, HDR (PQ and HLG), and wide color gamuts natively.

File sizes are remarkable. AVIF is typically 50% smaller than JPEG at the same perceived quality, and 25%–30% smaller than WebP. For photographs with smooth gradients (skies, out-of-focus backgrounds), AVIF wins by even more.

The catch is encoding speed. AVIF's encoder is much slower than JPEG's or WebP's, sometimes 10× to 50× slower for high-quality settings. This matters for build pipelines and user-uploaded content. For content you encode once and serve millions of times, the cost is one-time.

Use AVIF for:

• New web content where you control the build pipeline
• HDR photographs (AVIF is the practical option in 2026)
• Anywhere bandwidth matters more than encode time

Limitations:

• Slow encoder (typically 1–10 seconds per megapixel at high quality)
• Less mature tooling than WebP or JPEG
• Some older image editing software does not yet support it natively (use plugins or web tools)

avifenc is the standard CLI encoder, available from libavif. Squoosh.app supports AVIF in the browser if you want to test on a single image.

JPEG XL: the format that should have won

JPEG XL (specified in 2022 as ISO/IEC 18181) was designed to replace JPEG outright. It is faster than AVIF, more capable than WebP, supports lossless re-encoding of existing JPEGs (about 20% smaller, byte-perfect decode), and has all the modern features (HDR, 16-bit, alpha, animation).

The problem is browser support. Safari shipped JPEG XL in version 17 (2023). Chrome explicitly removed support in version 110 citing low industry interest. Firefox does not support it. As of 2026, JPEG XL is a great format for client-side tooling and storage but a non-starter for web delivery.

If you produce a lot of JPEGs and want to keep them losslessly while saving disk space, cjxl original.jpg result.jxl will give you a 20% smaller file you can convert back with djxl later.

A decision flowchart

What kind of image?
  Photograph    - Need maximum compatibility?              -> JPEG    - Want smaller files, all modern browsers? -> WebP    - Want the smallest file, slower encode?   -> AVIF
  Graphic, screenshot, or logo    - Needs transparency?                      -> WebP (or PNG for compatibility)    - Pure pixel art or few colors?            -> PNG (indexed) or WebP lossless    - Otherwise                                -> PNG
  Animation    - Modern browsers only?                    -> AVIF or WebP    - Universal?                               -> APNG, or convert to a real video
  Source file you will edit later    - Single layer?                            -> PNG or lossless WebP    - Multi-layer?                             -> Native editor format (PSD, etc.)

The web-delivery pattern that covers nearly every case is the HTML <picture> element:

<picture>  <source srcset="hero.avif" type="image/avif">  <source srcset="hero.webp" type="image/webp">  <img src="hero.jpg" alt="…"></picture>

Browsers pick the first format they support. Modern browsers get AVIF; slightly older browsers get WebP; everything else gets JPEG. This pattern is supported by every major static-site framework and CDN.

A note on color profiles and HDR

Anything beyond standard sRGB requires embedded color profiles (ICC). All four formats support ICC profiles for wide-gamut content (Display P3, Adobe RGB), but only AVIF supports HDR natively. If you are shooting HDR on a recent iPhone or smartphone, AVIF is the format that preserves that data end to end.

For SDR sRGB content, the choice between formats does not depend on color science. It depends on file size and compatibility.

FAQ

Is WebP really universal in 2026?

Yes. Every browser representing more than 0.1% of global traffic has supported WebP for at least three years. The remaining edge cases are abandoned platforms (IE 11, ancient Android versions) where image format is the least of your problems.

Will AVIF replace WebP?

Eventually, probably. The encoder is still much slower than WebP's, which keeps it from being the default for user-uploaded content. As hardware-accelerated encoders become standard, the slowness will stop mattering. For now, WebP is the pragmatic choice and AVIF is the maximalist one.

Can I just use JPEG forever?

For existing content, yes. For new content, you are paying a 30%–50% bandwidth tax for no real benefit. Most CDNs (Cloudflare, Fastly, Bunny, Vercel) will re-encode JPEG uploads to WebP and AVIF on the fly with negotiated Accept headers, so even legacy JPEG sources can be served as modern formats at the edge.

What about GIF?

For static images, PNG is strictly better than GIF in every dimension (color, alpha, file size). For animation, real video (MP4, WebM) is dramatically smaller than GIF at the same quality. The only reason to use GIF in 2026 is platform compatibility (some chat apps and forums still process GIFs specially).

Does adding transparency hurt WebP or AVIF file sizes much?

Modestly. A WebP or AVIF with an 8-bit alpha channel is roughly 10%–20% larger than the same image without alpha. Compare with PNG, where transparency is essentially free because the format is lossless either way.

Is HEIC the same as HEIF?

HEIC is the file extension for HEIF (High Efficiency Image File Format) when it uses HEVC coding. Apple devices save photos as HEIC by default. HEIC has comparable compression to AVIF but Patent licensing on HEVC makes it impractical for web delivery; you will rarely see it outside Apple's ecosystem.

Sources

• WebP Compression Study, Google. The original comparison.
• AV1 Image File Format (AVIF) specification, Alliance for Open Media.
• libavif, the reference AVIF encoder.
• Can I use: WebP, AVIF, JPEG XL, current browser support data.
• Alakuijala, J. et al. (2019). JPEG XL next-generation image compression architecture and coding tools. JPEG Committee white paper.
• squoosh.app, browser-based comparison of all four formats.