AVIF vs PNG

What AVIF brings to lossless imaging

AVIF (AV1 Image File Format, 2019) uses the AV1 video codec — the most efficient royalty-free codec ever developed — for image compression. While AVIF is most often discussed as a JPEG replacement (lossy compression), it's also a powerful PNG replacement for lossless content. Lossless AVIF produces files 30-50% smaller than PNG at identical pixel-perfect quality.

For a content site with thousands of PNG screenshots, icons, or graphics, this translates to:

• Bandwidth savings: 30-50% reduction in image transfer.
• Storage savings: same reduction in disk usage and CDN costs.
• Faster page loads: smaller images = faster LCP (Largest Contentful Paint) = better Core Web Vitals.
• Better mobile experience: less data consumption on cellular connections.

PNG (1996) was revolutionary in its time — first widely-adopted lossless image format with alpha transparency, supporting any color depth from 1-bit to 16-bit per channel. It became the universal standard for graphics, screenshots, icons, and any image needing lossless preservation. But its compression algorithm (DEFLATE, derived from ZIP) is from 1996. AVIF's lossless compression algorithm is 25+ years more advanced.

When AVIF (lossless) is the right choice

1. Web graphics and screenshots: any content where you currently use PNG for web display. AVIF reduces file size 30-50% with identical pixel quality.

2. CDN-served lossless content: companies serving large quantities of PNG (CMSs, e-commerce platforms, design portfolios) can cut bandwidth bills significantly by migrating to AVIF.

3. Mobile-first applications: AVIF's smaller file sizes dramatically improve mobile experience over slow connections.

4. HDR content: AVIF natively supports 10-bit and 12-bit color depth, HDR luminance metadata, and wide color gamuts. PNG supports 16-bit but doesn't have native HDR signaling.

5. Animation alternative to APNG: AVIF supports animation natively and produces files 60-80% smaller than animated PNG (APNG).

6. Modern web platform projects: greenfield projects in 2026 should default to AVIF for new lossless graphics. The browser support is mature and the savings compound.

When PNG is still the right choice

1. Maximum compatibility: PNG works everywhere — Internet Explorer 4+ (1997), every email client, every legacy CMS, every printing system. AVIF requires modern browsers/viewers.

2. Print workflows: print software (RIPs, prepress tools, professional photo printers) typically expects PNG, JPEG, or TIFF. AVIF support in print pipelines is rare.

3. Image editing in older software: pre-2023 versions of many editors don't read AVIF. PNG works in everything from MS Paint to Photoshop CS6.

4. Technical documentation expecting PNG: many software documentation tools, technical writing platforms, and screenshot-heavy workflows assume PNG.

5. Long-term archival certainty: PNG has 30 years of guaranteed support. AVIF is younger and tied to one consortium (Alliance for Open Media). Long-term, PNG is more certain.

6. Existing PNG libraries: don't bulk-convert your existing PNG library to AVIF unless you have a specific bandwidth or storage constraint. The conversion is lossless so quality is preserved, but the migration effort may not pay off for static archives.

Browser support in 2026

AVIF support reached ~94% global browser coverage by 2024:

• Chrome, Edge, Opera, Brave: since 2020 (early adopter, full support).
• Firefox: since 2021.
• Safari (macOS Ventura+, iOS 16+): since 2022.

Less than 6% of users (older Safari, very old Android, Internet Explorer) lack AVIF support. For maximum coverage, use HTML <picture> with AVIF + PNG cascade:

<picture>
  <source srcset="image.avif" type="image/avif">
  <img src="image.png" alt="Description">
</picture>

Modern browsers load the smaller AVIF; older browsers fall back to PNG. Both audiences served correctly.

The encoding cost reality

AVIF's biggest practical drawback: encoding is slow. Lossless AVIF encoding takes 5-15 seconds per image vs sub-second for PNG. For batch processing thousands of images, this adds up.

• PNG encoding: ~50ms per typical screenshot (essentially instant).
• AVIF lossless encoding: ~5-15 seconds per typical screenshot (significant).

Decoding (when users view images) is fast for both — modern browsers decode AVIF in <100ms. The cost is one-time at encoding/build time.

For static sites that build infrequently, AVIF's encoding cost is acceptable. For real-time image processing pipelines (user uploads, on-the-fly resizing), PNG remains the practical choice unless you can absorb the encoding latency.

Conversion mechanics

KaijuConverter's PNG ↔ AVIF conversion uses libavif (reference AVIF implementation) with libpng (PNG handling) through ImageMagick. The pipeline:

1. Decodes source to raw pixel data (preserving exact color values, alpha, bit depth).
2. Re-encodes to target format with lossless settings.
3. Preserves metadata: ICC color profiles, EXIF data, gAMA gamma values.
4. Maintains alpha channel in both directions (transparency preserved bit-perfect).

The conversion is bit-perfect lossless in both directions — the pixel data is identical between source and output, only the encoding format differs.

Practical migration strategy

For sites considering PNG → AVIF migration:

1. Greenfield content: default to AVIF for all new lossless graphics.
2. High-traffic existing content: convert top 100 most-served PNG images to AVIF first (Pareto principle — 80% of bandwidth savings from 20% of images).
3. Static archives: leave alone. The migration effort doesn't pay off for rarely-served content.
4. CMS pipeline: integrate AVIF generation into your build pipeline (Eleventy, Hugo, Next.js Image all have plugins).
5. CDN-level conversion: Cloudflare Polish, Cloudinary, and similar services auto-convert PNG to AVIF and serve based on browser support, eliminating the build step entirely.

The bandwidth and Core Web Vitals improvements from AVIF migration typically pay back the implementation effort within weeks for sites with significant image traffic.