DevDockTools

When PNG Still Beats WebP or AVIF for Your Images

PNG isn't obsolete: see the specific cases — lossless edits, universal compatibility, simple graphics — where it still outperforms WebP and AVIF in practice.

By Daniel Agrici7 min read
pngwebpavifimage formatsimage optimization

The default advice for years has been "convert everything to WebP or AVIF," and for photographic hero images that's still correct. But format choice isn't a one-size-fits-all upgrade path, and there are several concrete situations where PNG remains the better tool — not out of nostalgia, but because of how each format's compression actually works.

PNG's Compression Model Isn't What People Assume

PNG uses per-scanline filtering (predicting each pixel from neighbors) followed by DEFLATE compression — a general-purpose lossless algorithm, not one tuned specifically for photographic gradients the way modern lossy codecs are. That's exactly why PNG struggles with photos (too much high-frequency variation for DEFLATE to exploit) but excels at flat-color and repetitive content: icons, logos, UI screenshots, diagrams, and anything with large uniform regions or hard edges. On that kind of content, PNG's output is often already close to the practical minimum, and switching to WebP's lossless mode buys you a marginal reduction at best while adding another format to maintain.

Cases Where PNG Is Still the Right Call

You need guaranteed lossless output

PNG is lossless by definition — no mode selection, no quality parameter to misconfigure. WebP and AVIF both support lossless modes, but they require deliberately choosing that mode over the (usually default) lossy path, and it's easy for a build tool or CMS to silently apply lossy compression when you expected lossless. If a pixel-perfect reproduction is a hard requirement — medical imaging references, design system source assets, screenshots used for pixel-diffing in visual regression tests — PNG's lack of ambiguity is a feature.

The image is a working/source file, not a delivery asset

Any image you expect to reopen and re-edit — a screenshot you'll annotate, an exported UI mockup, an intermediate asset in a design pipeline — should stay PNG (or a truly lossless format) until the final export step. Re-encoding a lossy WebP or AVIF file, editing it, and re-exporting compounds generation loss even at high quality settings, the same problem JPEG has always had. Keep the lossless master, generate the delivery format at the end.

Compatibility with tools that don't fully support newer formats

Browser support for WebP and AVIF is now broad — see caniuse.com's WebP and AVIF tables — but plenty of non-browser consumers of your images still assume PNG or JPEG: email clients rendering inline images, some social platforms' unfurl previews, PDF generation libraries, older image-processing services, and design handoff tools. If an image needs to work correctly in a pipeline you don't fully control, PNG's near-universal support removes a variable.

Simple graphics where lossy artifacts are unacceptable at any size

Sharp text, thin lines, and pixel-art style graphics show compression artifacts from lossy codecs in ways that are jarring even at high quality settings — ringing around text edges, color bleed on 1px borders. PNG's lossless filtering doesn't introduce this class of artifact at all. If you've ever seen a WebP screenshot with fuzzy edges around UI text, that's a lossy-mode choice, not an inherent WebP limitation, but it's also exactly why PNG remains the safer default for this content type.

Where PNG Loses

None of this makes PNG the right universal default. For photographic images displayed at web scale, WebP and AVIF both produce meaningfully smaller files at comparable visual quality than PNG, because their lossy modes use prediction and transform techniques suited to continuous-tone images — something PNG's filter-then-DEFLATE pipeline was never designed for. If you're shipping hero photos, product images, or blog post illustrations to end users, converting from PNG to WebP is close to a free win.

# Quick comparison: check if lossless WebP actually beats your PNG
cwebp -lossless -q 100 input.png -o output-lossless.webp
ls -la input.png output-lossless.webp

Run that comparison before assuming conversion helps — for flat-graphic PNGs the WebP output is sometimes larger, and for photographic PNGs it's almost always smaller. There's no substitute for checking your actual asset.

Shrinking a PNG Without Changing Format

Before reaching for a format switch, it's worth knowing PNG has its own optimization headroom that has nothing to do with WebP or AVIF. The DEFLATE stage PNG relies on responds well to two techniques that don't touch the format at all:

  • Palette/indexed color reduction. A PNG using millions of possible colors (truecolor, 24-bit or 32-bit with alpha) can often be converted to an 8-bit indexed palette — 256 colors or fewer — with no visible difference for icons, illustrations, and UI graphics that don't actually use a wide color range. This is a lossy step in the sense that it discards color precision, but for flat-color content the loss is frequently invisible while the size reduction is substantial.
  • Recompression with a better DEFLATE implementation. Tools like oxipng or pngcrush re-run the compression stage with more exhaustive filter and compression-level search than most export pipelines bother with by default, producing a byte-identical (pixel-for-pixel) PNG that's smaller purely from better compression parameter choices — no quality tradeoff at all.
# Lossless recompression pass — same pixels, smaller file
oxipng -o 4 --strip safe input.png

Running this before deciding a PNG "needs" to become WebP sometimes closes most of the size gap on its own, particularly for icon and illustration content where the WebP win was going to be marginal anyway.

PNG vs GIF and APNG for Animation

PNG itself has no animation support, but its animated sibling APNG (Animated PNG) is relevant to this comparison because it's the lossless-animation analog of the same tradeoff: APNG supports full 24-bit color and alpha transparency, unlike GIF's 256-color palette and binary (on/off) transparency, so a UI recording or animated diagram that needs clean color and soft edges will look visibly better as APNG than as GIF. WebP also supports lossy and lossless animation and generally produces smaller files than APNG for the same content, which is why WebP — not APNG — is the usual recommendation for animated content on the web today. APNG mainly matters as a fallback or as an intermediate lossless master before final export, the same role static PNG plays for still images.

A Decision Framework

| Situation | Best format | | --- | --- | | Photo for web delivery | WebP or AVIF (lossy) | | Icon, logo, or flat-color graphic | PNG (or SVG if vector) | | Source/master file for future edits | PNG (lossless) | | Transparent graphic with sharp edges | PNG | | Screenshot for documentation | PNG | | Image with unpredictable downstream consumers | PNG or JPEG for max compatibility |

The pattern: PNG wins when correctness, compatibility, or edit-ability matters more than shaving kilobytes, and lossy formats win when the image is a finished, photographic delivery asset with no further editing planned.

Converting Between Formats Without Guesswork

Rather than committing to one format across your whole asset library, test both directions on representative images. Use PNG to WebP to see the actual size difference on your own graphics before assuming the conversion helps, and keep WebP to PNG on hand for the cases where you need to get back to a lossless master from a delivery asset. Decide per asset type, not per project.

Frequently Asked Questions

Is PNG obsolete now that WebP and AVIF exist?
No. PNG remains the better choice for source assets you'll re-edit, for content requiring guaranteed lossless output, and for simple graphics where its filtering and DEFLATE compression already produce near-minimal files. WebP and AVIF generally win for photographic content and for lossy compression where PNG has no equivalent mode.
Does AVIF always produce smaller files than PNG?
Not for every image type. AVIF's lossless mode exists but often doesn't beat PNG on flat-color graphics, icons, or images with large uniform regions, where PNG's filtering plus DEFLATE is already close to optimal. AVIF's real advantage over PNG shows up in lossy mode on photographic content, not in a lossless-to-lossless comparison.
Should I convert all my PNGs to WebP for SEO?
Only if the PNGs are being served to end users and file size affects load time; search engines don't rank pages higher for using WebP specifically. Convert user-facing photographic PNGs to WebP or AVIF for performance, but keep source files, favicons, and print assets in PNG since format doesn't factor into ranking directly.