PNG vs JPG vs WebP: pick the right image format in 2026

# The short rule

• Photos → WebP (lossy), fall back to JPG.
• Graphics, logos, screenshots with text → WebP (lossless), fall back to PNG.
• Needs transparency → WebP or PNG.
• Must be universally supported (email, old clients) → JPG if photo, PNG otherwise.

That's it. Keep reading for the why.

# The formats

# PNG — lossless, alpha, crisp edges

Great at: logos, UI screenshots, anything with sharp lines or transparency.

Bad at: photos. A 2MB JPG easily becomes a 10MB PNG.

Key feature: alpha channel (8-bit transparency per pixel) that WebP matches and JPG doesn't have.

# JPG — lossy, universal, photos

Great at: photos, gradients, anything smooth. Universally supported by every browser and email client ever made.

Bad at: text, logos, anything with hard edges (ringing artifacts around edges become visible).

No alpha channel. No animation.

# WebP — Google's format, 2010

Beats JPG by ~25–35% at the same perceived quality. Beats PNG lossless by ~26%. Supports alpha. Supports animation. Now universally supported (including Safari ≥ 14).

<div class="callout callout-tip" role="note"><div class="callout-title">Tip</div><div class="callout-body"><p>For every JPG you ship, the WebP version will be ~30% smaller with no visible quality loss. For every PNG, ~26% smaller. That's real bandwidth — worth it even if you keep the legacy formats as fallbacks via <code>&lt;picture&gt;</code>.</p></div></div>

# AVIF — even better, 2020

New king of compression. Based on the AV1 video codec. Typically 20–30% smaller than WebP at the same quality. Browser support is now universal in modern browsers.

Downsides: encoding is slow (not a concern at build time), tool support in some older image editors lags.

# Which to ship to browsers

Use <picture> to let the browser pick the best it supports:

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

The <img> fallback loads only for browsers that support neither AVIF nor WebP.

# Which to keep as source masters

Always keep the original (RAW, PSD, or max-quality PNG). Lossy formats (JPG, WebP lossy, AVIF) can't be re-edited without cumulative quality loss.

# Common conversions

• PNG → WebP for web delivery: our Image Converter
• HEIC (iPhone) → JPG for upload compatibility: most tools support this too
• Large PNG → smaller PNG via our Image Compressor

# What affects file size

• Resolution — linearly. Halve width & height → quarter the size.
• Quality setting — nonlinearly. Going from 95% to 80% often drops size by 50% with no visible change.
• Color depth — 24-bit vs 8-bit palette PNG can be 5× different.

# Rules of thumb

• If it's over 1MB, it's too big for web hero. Compress or resize.
• If you're showing the same image above and below the fold, serve responsive srcset — don't send the 4K version to a phone.
• If the edges look fuzzy around text, you shipped JPG where you needed PNG.

# Related tools

• Image Converter — PNG ↔ JPG ↔ WebP in your browser
• Image Compressor — shrink without reformatting
• Image Resizer — exact dimensions
• SVG to PNG — rasterize vector assets