Image Format Guide: PNG vs JPEG vs WebP vs AVIF — When to Use Each

Picking the wrong image format costs you bandwidth, hurts Core Web Vitals, and can break transparency or quality in ways that are hard to debug after the fact. PNG, JPEG, WebP, AVIF, GIF, and SVG each solve a different problem, and choosing among them is one of the highest ROI optimizations available on any web project. Use the Image Converter to follow along and convert between formats directly in your browser. For reducing file size after conversion, the Image Compressor lets you tune quality and compare results side by side.

Format Showdown Table

Here is a reference covering every format you are likely to encounter in web development, including the properties that determine when each one is appropriate.

The size comparisons above are typical ranges for photographic content at comparable perceptual quality. Results vary by image content — AVIF gains are often larger on high-detail photos and smaller on flat illustrations.

When Each Format Wins

JPEG — photographs and complex scenes

JPEG remains the safe default for photographs. Its discrete cosine transform (DCT) compression discards high-frequency detail that human vision is least sensitive to. At quality 80–85 the visual result is indistinguishable from the original for most viewers, and file sizes are predictable. JPEG does not support transparency and every re-save introduces additional compression artifacts (generational loss — covered below). Use it when you need maximum compatibility and do not need an alpha channel.

PNG — screenshots, UI elements, and precision images

PNG uses lossless compression, so every pixel is reproduced exactly. This makes it ideal for screenshots, UI mockups, diagrams, and any image where text or sharp edges must remain crisp. PNG also supports a full 8-bit alpha channel, making it the workhorse format for logos and icons that need to sit on varying backgrounds. The cost is file size: a photographic PNG is typically 2–3× larger than the equivalent JPEG.

WebP — the general-purpose modern format

Google introduced WebP in 2010 as a unified replacement for both JPEG and PNG. In lossy mode it uses a VP8-based codec that consistently beats JPEG by around 25–35% at equivalent quality. In lossless mode it beats PNG by around 20–30% on typical web content. It supports alpha in both modes and animation as an alternative to GIF. Browser support is now universal (see compatibility table below), making WebP the right default for most new projects.

AVIF — maximum compression when compatibility allows

AVIF is derived from the AV1 video codec. It achieves 40–55% smaller files than JPEG at comparable quality, handles HDR color, and supports wide color gamuts. The tradeoff is encoding speed: AVIF is significantly slower to encode than WebP, which matters in on-the-fly image pipelines. Decoding is fast enough to be imperceptible. Use AVIF as the primary format in a <picture> element with a WebP fallback for full coverage.

GIF — legacy animation only

GIF is limited to 256 colors and binary transparency (a pixel is either fully transparent or fully opaque). For static images it is strictly inferior to PNG. For animation, WebP and AVIF both produce dramatically smaller files. The only reason to serve GIF in 2026 is compatibility with platforms that do not accept modern formats (some email clients, some chat tools). Otherwise, convert to WebP or AVIF.

SVG — icons, logos, and illustrations

SVG is a vector format — it describes shapes mathematically rather than as a pixel grid. This means it scales to any resolution without loss, making it the correct format for icons, logos, charts, and any graphic that needs to appear sharp on high-density displays. SVG can be inlined in HTML, styled with CSS, and animated. It is not appropriate for photographs or photorealistic images because vector paths cannot represent continuous tone.

Browser Compatibility Matrix

Compatibility data below reflects stable browser releases as of early 2026, sourced from caniuse.com.

The ~7% gap in AVIF coverage is almost entirely older Safari on iOS 15 and macOS Monterey. A <picture> element with an AVIF source and a WebP fallback covers both groups without any JavaScript.

For related reading on AVIF and HEIF encoding details, see the AVIF and HEIF Image Formats article.

Lossy vs Lossless Compression

The distinction is more nuanced than "quality loss vs no quality loss." Understanding what each type actually does helps you choose the right quality settings.

Lossy compression

Lossy codecs (JPEG, WebP lossy, AVIF lossy) permanently discard data on encode. They do this by exploiting properties of human visual perception: the eye is less sensitive to high-frequency luminance variation and even less sensitive to chrominance variation. The codec reduces precision in those areas, achieving smaller files with minimal perceptual impact.

Generational loss is the critical practical concern. Every time you open a JPEG and save it again, the codec re-runs compression on already-compressed data. Artifacts accumulate multiplicatively. After three or four save cycles, degradation is often visible. The rule: always keep an uncompressed or lossless master (PSD, TIFF, PNG, or RAW), and export to JPEG or lossy WebP only as the final delivery step.

Lossless compression

Lossless codecs (PNG, WebP lossless, AVIF lossless, GIF) reduce file size using mathematical redundancy — run-length encoding, Huffman coding, LZ-based dictionaries — but never discard pixel data. You can re-save a PNG indefinitely with zero quality loss. The cost is larger files for photographic content where adjacent pixels vary continuously.

Practical guidance: Use lossless for graphics, screenshots, and assets that will be edited again. Use lossy for photographs, hero images, and thumbnails where file size is the primary concern and a master copy exists.

Transparency Handling

Transparency support varies significantly across formats, and the differences matter when compositing images over backgrounds.

JPEG transparency workaround: white matte

When you must convert a transparent PNG to JPEG (for example, to reduce file size on a product photo that will always appear on a white background), flatten the alpha channel against the target background color before encoding. If you composite against white before saving, the result looks correct on white backgrounds. If you composite against the wrong color, fringing artifacts become visible against any other background.

// Node.js with sharp — flatten PNG transparency before JPEG encode
import sharp from 'sharp';

await sharp('input-transparent.png')
  .flatten({ background: { r: 255, g: 255, b: 255 } }) // white matte
  .jpeg({ quality: 85 })
  .toFile('output.jpg');

Practical Conversion Workflows

The picture element with fallback chain

The standard approach for serving modern formats while maintaining compatibility is the HTML <picture> element. The browser tries each <source> in order and uses the first format it supports, falling back to the <img> tag.

<!-- AVIF → WebP → JPEG fallback chain -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" width="1200" height="630" />
</picture>

You pay the cost of storing three files per image, but you serve the smallest possible format to every visitor. On image-heavy pages this regularly translates to 30–50% bandwidth reduction for users on modern browsers.

Responsive images with srcset

Combine format selection with responsive sizing to serve the right resolution for each device:

<picture>
  <source
    type="image/avif"
    srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  />
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  />
  <img
    src="hero-1200.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
    alt="Hero image"
    width="1200"
    height="630"
    loading="lazy"
  />
</picture>

For a deeper look at building a complete optimization pipeline, see the Image Optimization Workflow article, which covers build-time automation, CDN integration, and caching strategies.

Programmatic Conversion

sharp (Node.js)

sharp is the standard image processing library for Node.js. It wraps libvips and is significantly faster than ImageMagick for web use cases.

npm install sharp

import sharp from 'sharp';

// JPEG → WebP (lossy)
await sharp('input.jpg')
  .webp({ quality: 82 })
  .toFile('output.webp');

// JPEG → AVIF (lossy)
await sharp('input.jpg')
  .avif({ quality: 60, effort: 4 }) // effort 0–9, higher = smaller + slower
  .toFile('output.avif');

// PNG → WebP lossless
await sharp('input.png')
  .webp({ lossless: true })
  .toFile('output-lossless.webp');

// Batch conversion with format detection
import { readdir } from 'fs/promises';
import path from 'path';

const files = await readdir('./images');
for (const file of files) {
  if (!/\.(jpe?g|png)$/i.test(file)) continue;
  const base = path.basename(file, path.extname(file));
  await sharp(`./images/${file}`)
    .webp({ quality: 82 })
    .toFile(`./output/${base}.webp`);
  await sharp(`./images/${file}`)
    .avif({ quality: 60, effort: 4 })
    .toFile(`./output/${base}.avif`);
}

squoosh CLI

@squoosh/cli is Google's command-line wrapper around the same codecs used in their Squoosh web app. It is useful for one-off conversions and scripts where you want codec parity with the browser.

npx @squoosh/cli --webp '{"quality":82}' input.jpg
npx @squoosh/cli --avif '{"cqLevel":35}' input.jpg

# Batch convert a directory to WebP
npx @squoosh/cli --webp '{"quality":82}' ./images/*.jpg

Pillow (Python)

For Python pipelines, Pillow handles most conversions. AVIF support requires installing the optional pillow-avif-plugin.

from PIL import Image

# JPEG → WebP
with Image.open("input.jpg") as img:
    img.save("output.webp", "WEBP", quality=82)

# PNG with alpha → WebP lossless
with Image.open("input.png") as img:
    img.save("output-lossless.webp", "WEBP", lossless=True)

# JPEG → AVIF (requires pillow-avif-plugin)
import pillow_avif  # noqa: F401 — registers the codec
with Image.open("input.jpg") as img:
    img.save("output.avif", "AVIF", quality=60)

# Convert with white matte (for PNG → JPEG)
with Image.open("input-transparent.png") as img:
    background = Image.new("RGB", img.size, (255, 255, 255))
    background.paste(img, mask=img.split()[3])  # use alpha as mask
    background.save("output.jpg", "JPEG", quality=85)

Performance Impact

Switching to modern formats is one of the few optimizations that helps Core Web Vitals across the board — smaller files mean faster LCP (Largest Contentful Paint) and lower bandwidth cost for users on metered connections.

The AVIF encode speed penalty matters primarily in on-demand image pipelines (like a Next.js image optimization endpoint that converts at request time). For build-time conversion — a Webpack plugin, a CI step — encode speed is a one-time cost that does not affect your users.

A reasonable strategy for most projects: convert everything to WebP at build time (fast, widely supported, good savings), and additionally generate AVIF for your largest, most frequently served images (hero images, product photos) where the extra savings justify the slower encode.

Quick Reference

Convert between PNG, JPEG, WebP, AVIF, and more directly in your browser with the Image Converter — no upload, no server, your files never leave your machine. To squeeze additional bytes after conversion, run the result through the Image Compressor. For sizing and cropping before conversion, see the Image Resizer Guide.