Image Formats Explained: JPEG, PNG, WebP, AVIF, GIF Compared

Picking the wrong image format is one of those mistakes that compounds quietly. Your pages load slower than they should, your storage costs more than it needs to, and the images might look worse than if you'd made a different choice. The good news is the decision tree is actually simple once you understand what each format is optimizing for.

JPEG: Lossy Compression for Photos

JPEG (Joint Photographic Experts Group) was standardized in 1992 and remains the dominant format for photographic images. Its compression algorithm uses Discrete Cosine Transform (DCT), which works by breaking the image into 8×8 pixel blocks, transforming each block into frequency components, and discarding the high-frequency detail that human vision is least sensitive to.

The result: photos compress to 10–20% of their uncompressed size at quality settings that look nearly identical to the original. A 20MB RAW photograph might become a 2MB JPEG with no perceptible quality loss.

JPEG has real limitations. No transparency — the alpha channel concept doesn't exist in JPEG. Lossy-only — every save degrades the file, even if you re-save at the same quality setting. And JPEG degrades badly at low quality settings — you get blocky 8×8 artifacts (called mosquito noise) around sharp edges.

When to use JPEG: photographs, hero images, anything with continuous tonal variation and no transparency requirement.

PNG: Lossless Compression for Everything Else

PNG (Portable Network Graphics) was designed in 1996 specifically to replace GIF for lossless images on the web. It uses DEFLATE (the same algorithm in gzip) plus pre-processing filters that improve compression on image data specifically.

PNG is lossless — the decompressed bytes are identical to the original. It supports a full alpha channel, meaning individual pixels can be anywhere from fully transparent to fully opaque. That's why logos, icons, interface screenshots, and UI elements default to PNG.

The tradeoff is file size. A PNG photograph is typically 4–6x larger than an equivalent JPEG. PNG compression works by finding patterns in pixel values, and photographs — where adjacent pixels can vary widely — have fewer exploitable patterns than graphics with flat areas.

When to use PNG: logos, icons, screenshots, images with text, diagrams, anything requiring transparency, anything where lossless accuracy matters (medical imaging, print-prep assets).

GIF: The Animated Format from 1987

GIF has one significant limitation and one significant feature. The limitation: it supports only 256 colors (an 8-bit palette). The feature: animation — multiple frames, each with its own palette and timing.

GIF's color limitation is a serious problem in 2026. An 8-bit palette means banding artifacts on any image with gradients or photographic content. Modern animated formats (WebP, AVIF) support full color depth and better compression.

GIF persists because of inertia. Every social platform, messaging app, and CMS that "supports GIFs" has years of infrastructure built around the format. That's changing slowly — many platforms transcode uploaded GIFs to video internally and serve MP4 or WebM — but GIF files are still uploaded constantly.

For new work: use WebP or AVIF for animated content. For short video loops, <video autoplay loop muted playsinline> with an MP4 or WebM source outperforms GIF in every dimension.

WebP: Google's Modern Format

Google released WebP in 2010 as a format supporting both lossy and lossless compression, transparency, and animation — covering everything JPEG, PNG, and GIF do individually, in one format.

WebP's lossy mode uses a predictive coding approach derived from the VP8 video codec. In practice:

• WebP lossy is roughly 25–34% smaller than JPEG at equivalent visual quality
• WebP lossless is roughly 26% smaller than PNG
• WebP animated is dramatically smaller than GIF — often 60–80% smaller

Browser support is essentially universal. Chrome has supported WebP since 2013. Firefox since 2019. Safari since iOS 14 (late 2020). Edge since Chromium-based version. If you're not serving WebP in 2026, you're leaving real performance on the table.

Read WebP: Why You Should Switch from JPEG and PNG Today for the conversion workflow and fallback patterns.

AVIF: The Newest Contender

AVIF (AV1 Image File Format) is derived from the AV1 video codec developed by the Alliance for Open Media. It achieves compression ratios that put WebP to shame — often 40–50% smaller than JPEG at comparable quality, and 20–30% smaller than WebP.

AVIF supports HDR color, wide color gamut, lossless and lossy modes, transparency, and animation. It's the closest thing to "one format to replace them all" that currently exists.

Browser support is converging fast. Chrome and Firefox have supported AVIF since 2020. Safari added it in Safari 16 (2022). The main remaining gap is encoder speed — AVIF encoding is significantly slower than WebP or JPEG, though this is improving with each codec release.

For production use, a typical pattern is to serve AVIF with a WebP fallback using the <picture> element:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

SVG: Vector, Not Raster

SVG (Scalable Vector Graphics) is fundamentally different from the other formats. It doesn't store pixels — it stores XML describing geometry: paths, curves, circles, text. The browser renders it at whatever size it's displayed, perfectly sharp at any resolution.

SVG is the right choice for logos, icons, illustrations, and anything that needs to scale. A favicon that's also a header logo: SVG. An icon used at 16px, 32px, and 64px: SVG. A line chart: SVG.

SVG is the wrong choice for photographs or anything with complex natural imagery. You could technically represent a photograph as millions of tiny SVG shapes — but nobody does that.

SVG files can be quite small for simple graphics — a typical icon might be under 1KB. They're also text, which means gzip compresses them well and you can modify them with a text editor or manipulate them with JavaScript.

The Decision Chart

Here's the practical guide:

The common thread: if you're serving to a browser in 2026, WebP should be your baseline. AVIF where encoder speed allows. JPEG only for legacy tooling compatibility. PNG only where you need lossless and don't have WebP support.

Converting Between Formats

The Image Convert tool handles format conversion between JPEG, PNG, WebP, and AVIF in the browser. For batch compression of any format, Image Compress lets you set a target quality and see the result before downloading. And for cropping or resizing before conversion, Image Resize is the starting point.

The WebP specification from Google's developer docs is the definitive technical reference for the format's compression approach and feature set.

Wrapping Up

The format landscape simplified considerably once WebP became universally supported. For most web use cases: SVG for vectors, WebP for rasters, AVIF when you can afford the encoder overhead. Keep JPEG and PNG for legacy compatibility and edge cases. The tooling to make this practical — both in CLI pipelines and in the browser — is better than it's ever been.