PNG to AVIF Converter

Convert PNG images to AVIF format instantly in your browser.

Settings

Smaller fileBetter quality

Output: AVIF format

Transparency fully preserved
No upload — 100% private
HDR & wide colour gamut
Batch convert + ZIP

Why Convert PNG to AVIF? (And Why Not Just WebP?)

PNG files are lossless and large. For any PNG that does not need to stay editable or archived at pixel-perfect quality, converting to AVIF gives you smaller file sizes than any other web format — including WebP — while fully preserving alpha transparency.

AVIF compresses 50–80% better than PNG for photographs and 30–60% better for graphics. Compared to WebP, AVIF typically produces files that are 20–30% smaller at the same visual quality. It also supports features PNG and WebP cannot match: HDR imaging, wide colour gamut (WCG), and 10-bit and 12-bit colour depth.

The only reason to choose WebP over AVIF today is legacy browser support — WebP works on browsers going back to 2018, while AVIF requires browsers from 2020 onwards. In 2026, AVIF covers over 93% of global users — enough to make it the default choice for most websites.

PNG vs AVIF vs WebP comparison for transparency, compression, and HDR
FeaturePNGWebPAVIF ✓
Alpha transparency
Lossy compression
Lossless compression
File size vs PNGBaseline~30% smaller50–80% smaller
File size vs WebPLargerBaseline~20–30% smaller
HDR / wide colour gamut✓ (10/12-bit)
WordPress support✓ Always✓ WP 5.8+✓ WordPress 6.5+
Shopify support✓ Always✓ 2024+
Browser support (2026)Universal95%+ users93%+ users
Rule of thumb: If your site needs to support browsers older than 2020, serve AVIF with a WebP fallback using the picture element. If you can assume modern browsers, AVIF alone is sufficient.

How to Convert PNG to AVIF — 3 Steps

  1. 1

    Upload your PNG files

    Drag and drop PNG images onto the converter above, or click to browse. Add a single file or a full batch — no limit. Transparent PNGs, large photos, and icon sets are all supported.

  2. 2

    Choose AVIF quality

    Photos: quality 70–80 gives 50–80% smaller files with invisible quality loss. Logos and icons: use 85–95 to keep edges crisp. Transparency is fully preserved at every quality level — nothing is flattened.

  3. 3

    Download your AVIF files

    Conversion is instant — no waiting for uploads. Download each file individually or click Download All for a single ZIP archive.

Best AVIF Quality Settings by Image Type

70 – 80

Photographs & hero images

50–80% smaller than PNG. Visual difference is imperceptible at normal viewing size. Test at 75 first — most photos look identical to PNG at this setting.

Don't go below 65 for full-bleed hero images — block artifacts become visible on smooth gradients.

85 – 95

Logos, icons, UI elements

Keeps hard edges, flat colours, and anti-aliased text pixel-sharp. Still 40–60% smaller than PNG. For icons under 64×64px, use lossless mode.

Don't go below 80 for logos — colour banding becomes visible on flat corporate colours.

75 – 85

Product images (e-commerce)

Balances detail preservation with strong compression. Product labels with text need quality 80+. Transparent background preserved perfectly.

Check labels and fine text at 100% zoom before publishing.

55 – 70

Thumbnails & previews

Maximum compression for small images that users view at tiny sizes. 70–85% smaller than PNG. Minor artifacts are acceptable at thumbnail scale.

Don't use this range for full-size or featured images.

Pro tip: Export the same image at your target quality and open both files in a browser tab side-by-side. If you cannot spot a difference at 100% zoom, reduce quality by 5 more and test again. Most images have a "invisible threshold" 10–15 points lower than you'd expect.

AVIF's Unique Advantage: HDR and Wide Colour Gamut

AVIF is the only web image format that natively supports HDR (High Dynamic Range) and wide colour gamut (WCG) with 10-bit and 12-bit colour depth. PNG is limited to 8-bit sRGB colour. WebP also maxes out at 8-bit. This makes AVIF the only viable choice for delivering professional photography, retouched product images, and design assets at full colour fidelity on modern HDR displays (including iPhone, iPad, and most 2023+ monitors).

10/12-bit colour depth

AVIF stores 1024 or 4096 tonal steps per channel vs PNG's 256. Smoother gradients, no banding on skies and skin tones.

HDR imaging

Preserve specular highlights and deep shadows in product photography and professional retouched images.

Wide colour gamut

Display P3 and Rec. 2020 colours on modern monitors and phones. Standard PNG clips these to sRGB.

Note: Standard PNG files use 8-bit sRGB colour. Converting them to AVIF does not add HDR automatically. AVIF HDR benefits apply when your source PNG is exported from a colour-managed workflow (Photoshop, Affinity Photo, Figma with P3 colour space).

AVIF in WordPress and Shopify (2024–2026)

WordPress 6.5+ (March 2024)

WordPress added native AVIF support in version 6.5. You can now upload .avif files directly to the Media Library without any plugin. WordPress serves them as-is to browsers that support AVIF.

Upload .avif files directly in WP 6.5+
Use in Gutenberg blocks, Elementor, and page builders
WP older than 6.5: use the AVIF plugin from wordpress.org

Shopify (2024+)

Shopify introduced AVIF support in 2024. Upload .avif product images and Shopify's CDN automatically negotiates the best format for each browser — delivering AVIF to modern browsers and falling back to JPEG for older ones.

Upload .avif product images directly
Shopify CDN handles format fallback automatically
Improves page speed score for product category pages

How to Serve AVIF on Your Website (with Fallback + LCP Optimisation)

Use the HTML picture element to serve AVIF to modern browsers with automatic fallbacks. For your page's Largest Contentful Paint (LCP) image — typically your hero image — add fetchpriority="high" to improve your Google Core Web Vitals score:



  
  
  "Company




  
  
  "Hero




  
  
  "Product
fetchpriority="high"Tells the browser to preload this image before other resources. Use only on your LCP image — using it on multiple images cancels the effect.
loading="lazy"Defers loading images below the fold until the user scrolls near them. Improves initial page load time significantly on image-heavy pages.
width + height attributesAlways set these. They prevent Cumulative Layout Shift (CLS) — another Core Web Vitals metric that affects Google ranking.

Troubleshooting

AVIF file is larger than the original PNG

This can happen with small graphics, simple geometric shapes, or images with large flat-colour areas. AVIF's compression works best on photographs and complex scenes. Try: (1) Lower quality — if you're at 85, try 75. (2) For simple graphics, check whether lossless WebP gives a better result. (3) For very small icons, PNG may already be near-optimal — converting adds overhead.

Transparent background disappeared or looks wrong

AVIF preserves alpha transparency — this should not happen. If transparent areas look wrong, check that your image viewer supports AVIF with alpha channel. Open the file in Chrome or Firefox to verify. Very old versions of macOS Preview may not display AVIF transparency correctly; upgrade to macOS Ventura (13) or later.

Logo has colour banding or blurry edges after conversion

You used too low a quality setting for a logo or icon. AVIF lossy compression introduces subtle artefacts on hard edges at quality settings below 80. Increase quality to 88–95. For small icons (under 100×100px), try the highest quality setting or use lossless mode. Flat corporate colours (like brand blues or reds) are particularly sensitive to compression artefacts.

AVIF won't upload to WordPress

You need WordPress 6.5 or later for native AVIF support. If you're on an older version, install the AVIF Support plugin from wordpress.org — it adds AVIF MIME type support to the media library. Also check that your server's PHP version is 8.0+ and that GD or Imagick is compiled with AVIF support.

AVIF images won't open on Windows

Install the AV1 Video Extension from the Microsoft Store (free). After installation, Windows Photos and File Explorer will display AVIF files natively. Alternatively, open any .avif file in Microsoft Edge or Google Chrome — both display AVIF without any extensions.

Frequently Asked Questions

Does PNG to AVIF keep transparency?

Yes. AVIF fully supports alpha channel transparency, including semi-transparent pixels and soft edges. Your logos, icons, and cut-out images will retain their transparent backgrounds after conversion — identical to how PNG handles transparency. Unlike converting to JPG, no pixels are ever flattened onto a white or solid background.

How much smaller is AVIF than PNG?

For photo-like PNG images, AVIF typically reduces file size by 50–80% at similar visual quality. For graphics, logos, and images with large flat-colour areas, reductions of 30–60% are typical. AVIF consistently outperforms both PNG and WebP in compression efficiency, especially for complex images with gradients, shadows, and fine detail.

Should I convert PNG to AVIF or PNG to WebP?

AVIF is the better choice for maximum compression — it typically produces 20–30% smaller files than WebP at equivalent quality. However, WebP has slightly broader legacy browser support (Chrome 9+ vs Chrome 85+ for AVIF). In 2026, AVIF is supported by over 93% of browsers globally, making it safe for most websites. Use AVIF for best compression. Use WebP if you need to support older browsers from 2019-2020 without a fallback.

Does AVIF support HDR and wide colour gamut from PNG?

Yes — this is one of AVIF's unique advantages over WebP and PNG. AVIF natively supports HDR (High Dynamic Range) and wide colour gamut (WCG) with 10-bit and 12-bit colour depth. Standard PNG files use 8-bit sRGB colour, so converting them to AVIF will not add HDR automatically, but AVIF is the correct format if you are starting with HDR PNG source files exported from professional design tools.

Is AVIF supported by WordPress and Shopify?

Yes. WordPress added native AVIF support in version 6.5 (released March 2024) — you can now upload AVIF images directly to the media library. Shopify also introduced AVIF support in 2024, automatically delivering AVIF to browsers that support it. If you are on an older WordPress version, the AVIF plugin handles it. For Shopify, use .avif files and the platform handles format negotiation automatically.

Can I batch convert PNG to AVIF and download as a ZIP?

Yes. Drop or select multiple PNG files at once — there is no limit. All files are converted simultaneously in your browser. Download each AVIF file individually, or click Download All to receive a single ZIP archive containing all converted files.

Is this PNG to AVIF converter private?

Yes. All conversion happens entirely inside your browser using JavaScript and WebAssembly. Your PNG files are never sent to any server — not even temporarily. This makes Creatoryn safe for confidential images, client work, brand assets, and sensitive documents.

What is the best AVIF quality setting for PNG logos and icons?

For logos and icons, use quality 85–95 or lossless mode. AVIF's lossy compression can introduce subtle colour banding on the hard edges and flat colour areas typical of logos. At quality 90+ these artifacts are invisible, and file sizes are still 40–60% smaller than the original PNG. For icons smaller than 64×64px, lossless AVIF is recommended as lossy compression on very small images can visibly degrade sharp edges.

Does AVIF work in all browsers in 2026?

AVIF is supported in all major browsers as of 2026: Chrome 85+ (August 2020), Firefox 93+ (October 2021), Safari 16+ (September 2022), Edge 121+ (January 2024), and Opera 71+. According to caniuse.com, this covers over 93% of global browser users. For maximum safety, use the HTML picture element to serve AVIF with a WebP or PNG fallback.

Related Tools

Convert your PNG files to AVIF — free, right now

Transparency preserved. HDR support. 50–80% smaller than PNG. No upload.

Start converting