PNG is the web's lossless raster standard, the format that guarantees every decoded pixel matches the source exactly while carrying full alpha transparency. It was built in 1996 to replace GIF without patent strings attached, and it still owns the jobs where fidelity is non-negotiable: logos, screenshots, UI assets, and source masters. AVIF relates to PNG along one sharp dividing line — PNG is lossless-only, while AVIF offers both lossy and lossless modes. This page explains where each lossless format wins, when AVIF shrinks a "PNG" by 80%, and how to ship transparent imagery with an AVIF→PNG fallback.
Convert between PNG and AVIF in your browser, with no upload: Convert PNG to AVIF and Convert AVIF to PNG.
Why PNG exists
PNG was created in 1996 to give the web a royalty-free lossless format. The trigger was a patent dispute: GIF used LZW compression, patented by Unisys, who began enforcing royalties on encoders in late 1994. A working group answered within months and published the PNG 1.0 specification in October 1996.
Four design goals shaped every byte of the format:
- Royalty-free — PNG uses DEFLATE, the same open LZ77 plus Huffman scheme as gzip and ZIP.
- Lossless — every decoded pixel equals the source pixel, with no generational decay.
- Better than GIF — full 24-bit colour and an 8-bit alpha channel replace GIF's 256-colour palette and 1-bit mask.
- Robust — a chunk structure lets decoders skip unknown data and detect corruption via per-chunk CRCs.
PNG became a W3C Recommendation and the universal carrier for graphics that must stay pixel-exact. AVIF arrived 23 years later from a different lineage — the AV1 video codec — and adds the one capability PNG never had: a lossy mode. See the AVIF format for that side of the story.
PNG is lossless-only; AVIF is both
PNG has exactly one compression mode, and it is lossless. There is no quality slider, no "save at 80%" — a PNG either stores the image perfectly or it does not store it. This single fact explains both PNG's durability and its size penalty on photographs.
AVIF, by contrast, exposes two modes. AVIF lossless reproduces every pixel like PNG, while AVIF lossy discards imperceptible detail to shrink files far further. The practical consequences split cleanly:
- For a photograph saved as PNG, lossy AVIF is the right conversion. It typically cuts the file by 80–90% at visually identical quality.
- For a flat UI graphic that must stay exact, lossless is mandatory, and the format choice gets subtler (see below).
PNG should never hold a photograph destined for the web. A 2 MB photographic PNG routinely becomes a 150–250 KB AVIF. The Lossy vs Lossless Compression guide covers how to pick a mode per asset.
PNG-8 versus PNG-24 and PNG-32
PNG is not one format but a family of colour types, and choosing the wrong one is the most common PNG mistake. The label "PNG-8" or "PNG-24" describes how each pixel is stored.
- PNG-8 — indexed colour, up to 256 entries in a palette, 1–8 bits per pixel. Ideal for flat logos and icons with few colours.
- PNG-24 — truecolour RGB, 8 bits per channel, 16.7 million colours, no transparency.
- PNG-32 — truecolour RGB plus an 8-bit alpha channel, the common choice for transparent web assets.
Encoding a 16-colour logo as PNG-32 instead of PNG-8 wastes 3–4× the bytes. Most editors default to truecolour, so explicitly quantising low-colour artwork to PNG-8 is the cheapest PNG saving available. Tools like pngquant automate the quantisation.
Full alpha transparency
PNG introduced per-pixel 8-bit alpha to the web, and that feature defined its career. Each pixel carries an independent opacity value from 0 to 255, enabling anti-aliased edges, soft drop shadows, and gradient fades that GIF's 1-bit mask could never produce.
This is why PNG became the format for cut-out product shots, logos over coloured backgrounds, and floating UI elements. JPG cannot store transparency at all, and GIF only manages a hard on/off mask.
AVIF matches PNG's alpha and then exceeds it. AVIF stores 8-bit, 10-bit, or 12-bit alpha, and can compress the colour channels lossily while keeping the alpha mask clean. Per the MDN image format guide, AVIF supports the same transparency PNG does inside a far more efficient container. A product photo on a transparent background that weighs 3 MB as PNG-32 can land near 80 KB as AVIF — a case explored in AVIF vs PNG.
When PNG is irreplaceable
PNG remains the correct format whenever bit-exact output must survive any viewer, any tool, and any number of re-saves. Four cases earn PNG over AVIF outright.
- Pixel-exact UI assets — sprite sheets, 1× and 2× icons, and design-system exports where a single shifted pixel is a bug.
- Screenshots with text — lossy compression smears small type and thin lines; lossless PNG keeps them razor-sharp.
- Tiny icons — at 16×16 or 32×32, AVIF's container overhead can exceed the payload, so PNG (or SVG for vector marks) wins.
- Source masters — keep an editing master as PNG, then export delivery copies; re-encoding lossy formats compounds artefacts.
For browser display only, lossless WebP is worth weighing too — it averages about 25% smaller than PNG on flat graphics, often beating even lossless AVIF, which can be slower and larger on simple imagery. The Lossless Image Formats comparison documents that lossless-AVIF-on-flat-art is rarely the winner.
Where AVIF beats PNG
AVIF wins decisively when a "PNG" is really a photograph, a screenshot containing photos, or a large transparent image. Three patterns dominate.
- Photographic PNGs — anything captured by a camera shrinks 80–90% as lossy AVIF with no visible loss. Convert these with Convert PNG to AVIF.
- Screenshots with embedded photos — UI panels around a photo or video frame compress poorly as PNG and dramatically better as AVIF.
- Large transparent imagery — AVIF's alpha at lossy colour bitrates produces transparent files a fraction of PNG-32's size.
The exception is flat, sharp-edged, low-colour art. Lossless AVIF beats PNG by only 20–35% there, encodes much slower, and is often outdone by lossless WebP. For that content, keep PNG or test WebP; reserve AVIF for photographic and large transparent work. The AVIF Optimization and AVIF Compression Settings guides cover encoder choices.
Shipping transparent imagery: AVIF with PNG fallback
Serve AVIF first and fall back to PNG using the <picture> element. The browser downloads the first source it can decode, so modern clients get the small AVIF and older ones get the exact PNG.
<picture>
<source type="image/avif" srcset="/product-cutout.avif" />
<img
src="/product-cutout.png"
alt="Product on transparent background"
width="800"
height="800"
loading="lazy"
decoding="async"
/>
</picture>
This pattern keeps full transparency on every browser while serving AVIF to roughly 94% of users. For the support numbers and tail-coverage strategy, see AVIF Browser Support. Need a PNG back from an AVIF for non-browser use — email, documents, or a design tool? Use Convert AVIF to PNG.
Frequently asked questions
Is PNG lossy or lossless? PNG is lossless only. Every decoded pixel matches the source exactly, and re-saving a PNG never degrades it.
Is AVIF always smaller than PNG? No. AVIF is much smaller for photos and large transparent images, but on flat, low-colour graphics lossless AVIF saves only 20–35% and can lose to lossless WebP.
Does converting PNG to AVIF keep transparency? Yes. AVIF carries a full alpha channel, so Convert PNG to AVIF preserves transparent backgrounds.
Should I replace all my PNGs with AVIF? No. Replace photographic and large transparent PNGs. Keep PNG for tiny icons, pixel-exact UI assets, screenshots with text, and source masters.
What is the difference between PNG-8 and PNG-24? PNG-8 stores up to 256 indexed colours and suits flat logos; PNG-24 stores 16.7 million truecolour values for richer images, with PNG-32 adding an alpha channel.
Convert between PNG and AVIF
These converters run entirely in your browser — the image never leaves your device:
- Convert PNG to AVIF — shrink photographic or transparent PNGs
- Convert AVIF to PNG — get a lossless PNG back for non-browser use
- Convert JPG to AVIF
- Convert AVIF to JPG
Sources and further reading
- PNG (Portable Network Graphics) Specification — W3C
- Image file type and format guide — MDN Web Docs
- Lossless Image Formats for the Web in 2026 — theimagecdn
- AVIF vs PNG — side-by-side decision guide
- Lossy vs Lossless Compression — choosing a mode