JPEG vs PNG vs WebP vs AVIF: The Complete Image Format Comparison

Choosing the wrong image format is one of the most common and most expensive mistakes in web performance. A JPEG where a WebP would do, a PNG where a JPEG is sufficient, or a format your browser does not support — each of these adds unnecessary weight to every page load, directly harming your Core Web Vitals scores and user experience. This guide explains how JPEG, PNG, WebP, and AVIF each work under the hood, when to use each one, and how to make an informed choice for your specific context.

You can convert between any of these formats using the BrowseryTools Image Converter — free, no sign-up, and everything runs locally in your browser.

JPEG: The Photography Standard

JPEG (Joint Photographic Experts Group) was introduced in 1992 and remains the dominant format for photographs. Its compression algorithm is based on the Discrete Cosine Transform (DCT): each image is divided into 8×8 pixel blocks, and each block is transformed from the spatial domain (pixel colors) into the frequency domain (how quickly colors change across the block). The encoder then quantizes this frequency data — keeping the low-frequency components that describe broad color regions, and discarding or coarsening the high-frequency components that describe fine detail and sharp edges.

This is why JPEG compression produces characteristic artifacts at aggressive settings: blocky 8×8 patches (called macroblocking), smearing around sharp edges, and color banding in gradients. These artifacts appear in regions of fine detail and high contrast — exactly the areas where the high-frequency components the encoder threw away would have mattered most.

JPEG is lossy — every save discards information permanently. At quality 85–90 (on a 0–100 scale), photographs typically look indistinguishable from the original at web viewing sizes while being 5–20× smaller than a PNG of the same image. JPEG does not support transparency (alpha channel) or animation.

PNG: Lossless Precision

PNG (Portable Network Graphics) uses lossless compression based on the DEFLATE algorithm, which combines LZ77 dictionary compression (finding and replacing repeated sequences of bytes) with Huffman coding (assigning shorter bit codes to more frequent values). No image data is ever discarded. Every pixel is stored exactly.

This makes PNG excellent for images that must be reproduced pixel-perfectly: screenshots, logos, icons, illustrations with sharp edges, text overlaid on images, and anything with transparency. PNG supports full 8-bit alpha channels, allowing smooth semi-transparent gradients.

The trade-off is file size. For photographic content with continuous color gradients, PNG files are enormous compared to JPEG at similar perceived quality. A photograph saved as PNG might be 10–20× larger than the same image as a well-compressed JPEG. PNG excels when content has large uniform regions, hard edges, or relatively few distinct colors — the patterns that LZ77 compresses efficiently. Photography, with its millions of subtly different color values, is the worst case for PNG.

WebP: The Modern Web Format

WebP was introduced by Google in 2010, derived from the VP8 video codec. It supports both lossy and lossless compression modes, plus animation and transparency in both modes. The lossy mode uses a similar DCT-based block approach to JPEG but with more sophisticated prediction techniques and entropy coding, typically achieving 25–35% smaller files than JPEG at equivalent visual quality. The lossless mode is 15–25% more efficient than PNG for most content.

Browser support is now essentially universal — all major browsers have supported WebP since 2020. The main remaining gap is legacy software: some older image editing applications and operating system image viewers do not handle WebP natively. For web delivery, WebP is the straightforward modern default that replaces both JPEG and PNG in most cases.

AVIF: The Next Generation

AVIF (AV1 Image File Format) is based on keyframes from the AV1 video codec, which was developed by the Alliance for Open Media and released in 2018. AV1's compression techniques are significantly more sophisticated than those underlying JPEG or WebP: larger, variable-size prediction blocks, more sophisticated intra-frame prediction, better handling of film grain and noise, and superior entropy coding. The result is typically 40–50% smaller files than JPEG at equivalent quality — often beating WebP by 20–30% as well.

AVIF supports full HDR color, wide color gamuts, transparency, animation, and both 8-bit and 10-bit color depth. Browser support has caught up quickly: Chrome (85+), Firefox (93+), and Safari (16+) all support AVIF. The main drawback is encoding speed — AVIF is significantly slower to encode than JPEG or WebP, which matters for real-time image processing pipelines but is irrelevant for pre-compressed static assets.

File Size Comparison for the Same Image

To make the differences concrete, here is a representative comparison for a 1920×1080 photograph at comparable perceived visual quality:

• PNG (lossless) — 4.2 MB. Perfect reproduction, no artifacts. Appropriate for a source master or when pixel accuracy is required.
• JPEG (quality 85) — 380 KB. Minimal visible artifacts at screen size. The standard for photographic web delivery for three decades.
• WebP (lossy, equivalent quality) — 270 KB. About 30% smaller than JPEG, visually comparable. A straightforward upgrade for most web projects.
• AVIF (equivalent quality) — 180 KB. About 50% smaller than JPEG, visually comparable or better. The best file size available today for photographic content.

These are representative figures; the actual ratios vary by image content. High-detail, high-noise photography benefits less from newer codecs than smooth, low-noise images do.

When to Use Each Format

• Photographs on the web — Use WebP with a JPEG fallback via the HTML <picture> element. If your build pipeline supports AVIF encoding, serve AVIF with WebP and JPEG fallbacks.
• Logos, icons, UI elements with transparency — WebP (lossless) or PNG. JPEG cannot represent transparency at all.
• Screenshots and screen recordings — PNG for anything requiring exact pixel reproduction. WebP lossless for a smaller alternative when exact fidelity is not critical.
• Illustrations with flat colors and sharp edges — PNG or WebP lossless. JPEG will introduce visible ringing artifacts around hard edges even at high quality settings.
• Print and archival — PNG (lossless) or TIFF. Lossy formats are inappropriate for source assets that will be re-edited.
• Email — JPEG or PNG. Email clients have inconsistent support for WebP and essentially none for AVIF. Compatibility over optimization here.

Impact on Core Web Vitals and Page Performance

Largest Contentful Paint (LCP) — one of Google's Core Web Vitals — measures how long it takes for the largest visible content element (often a hero image) to load. Image format choice directly affects LCP: an AVIF hero image loads faster than the equivalent JPEG, and a faster LCP improves both user experience and search rankings.

The compounding effect matters too. A page with 20 product images, each unnecessarily saved as PNG instead of WebP, might be 5–10 MB heavier than it needs to be. On mobile connections, that is the difference between a page that loads in 2 seconds and one that loads in 8 seconds.

Serving Different Formats to Different Browsers

The HTML <picture> element and its <source> children let you serve the best format each browser supports without JavaScript:

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

The browser picks the first <source> it supports. Browsers with AVIF support download the smallest file; browsers without fall through to WebP or JPEG. The <img> tag at the end serves as the universal fallback and is the only element that requires the alt attribute.

To convert your existing images to WebP or AVIF for this kind of multi-format setup, the BrowseryTools Image Converter handles batch conversions without uploading anything to a server — your source files stay on your device.