What is AVIF and why convert PNG to AVIF?

AVIF (AV1 Image File Format) is a next-generation image format that delivers significantly smaller file sizes than PNG while maintaining excellent visual quality. Converting a PNG to AVIF is ideal for web optimization — AVIF files are typically 50–60% smaller than equivalent PNGs, improving page load speed and Core Web Vitals scores. AVIF also supports full alpha-channel transparency, making it a high-performance replacement for PNG in modern web delivery.

Can I crop the PNG image before converting to AVIF?

Yes — the tool provides an interactive crop overlay on the source image. Drag the corner and edge handles to define exactly which portion of the PNG you want in the output AVIF. Click Preview Crop to see the result before downloading.

Does my image get uploaded to a server?

No. All processing — loading, cropping, and AVIF encoding — happens entirely in your browser using JavaScript and the HTML5 Canvas API. Your image never leaves your device.

Does converting PNG to AVIF preserve transparency?

Yes. AVIF supports full alpha-channel transparency. Transparent pixels in your PNG are preserved in the AVIF output. The crop tool does not composite transparent areas against a background — the transparency passes through to the AVIF file intact, subject to your browser's AVIF encoder implementation.

Which browsers support AVIF output?

Chrome 85+, Edge 121+, and Firefox 93+ support AVIF encoding via the Canvas toBlob API. Safari does not yet support canvas AVIF output. If your browser does not support AVIF encoding, you will see a compatibility warning and the tool will fall back to PNG download.

How do I reset and convert a different image?

Click the Start Over button that appears after loading an image. This clears the current file and resets the crop area so you can load a new PNG.

PNG to AVIF Crop Converter

Load a PNG, drag the crop handles to define exactly the area you need, preview the result, then download a compact next-gen AVIF file. Everything runs in your browser — your image never leaves your device.

⚠️ Your browser does not support AVIF encoding via the Canvas API. Chrome 85+, Edge 121+, and Firefox 93+ are required for AVIF output. The download will fall back to PNG.

🖼️

Drop a PNG here

or Browse Files · PNG supported

What This Tool Does

This tool loads a PNG image directly in your browser using URL.createObjectURL and img.decode() for reliable, guaranteed non-blank rendering. It presents an interactive crop overlay with draggable handles, and converts the selected area to an AVIF file using the browser's native Canvas toBlob('image/avif') encoder. No server upload is required. The full workflow — loading, cropping, encoding — runs entirely in client-side JavaScript using the HTML5 Canvas API. Transparency is preserved: PNG alpha-channel data passes through to the AVIF output without any background compositing.

Who This Is For

Web developers who need to extract a specific region from a PNG and deliver it as a compact AVIF asset for the fastest possible page loads
Designers who want to trim source PNG files down to the exact subject area and export in the modern AVIF format in one step
Anyone optimizing images for Core Web Vitals who needs to crop and convert PNG assets to AVIF without installing desktop software
Content creators who want to dramatically reduce image file size while preserving transparency by switching from PNG to AVIF

PNG vs AVIF: Format Comparison

Property	PNG	AVIF
Compression	Lossless DEFLATE	Lossy or lossless (AV1-based)
Typical file size vs PNG	Baseline	50–60% smaller (lossy); ~20% smaller (lossless)
Transparency support	Full alpha channel (0–255)	Full alpha channel (0–255)
Color depth	Up to 48-bit	Up to 12-bit per channel, HDR support
Browser support	Universal	Chrome 85+, Firefox 93+, Edge 121+, Safari 16+
Animation support	APNG only	Yes — animated AVIF
Best for	Lossless archives, screenshots	Next-gen web delivery, maximum compression

Frequently Asked Questions

How precise is the crop tool?▼

The crop operates at native pixel accuracy on the original PNG dimensions. The canvas is scaled to fit your screen for display, but the actual crop coordinates are mapped back to the full-resolution image before the AVIF is generated. You get an AVIF at the exact pixel dimensions shown in the crop dimensions badge.

Can I move the crop selection after setting it?▼

Yes — click and drag anywhere inside the crop rectangle (away from the handles) to reposition it anywhere within the image. Handles resize; the interior pans.

Does the AVIF output use lossy or lossless compression?▼

The browser's built-in Canvas toBlob AVIF encoder is used, which defaults to lossy AVIF at a high quality setting. This produces visually near-identical results to the source PNG at significantly smaller file sizes — typically 50–60% smaller than equivalent PNG.

What browsers are supported?▼

All modern browsers can run the crop interface. AVIF encoding via canvas.toBlob is supported in Chrome 85+, Edge 121+, and Firefox 93+. Safari supports AVIF display but not canvas AVIF output — in Safari the tool falls back to PNG download automatically.

Is there a file size limit?▼

There is no server-imposed limit because no upload occurs. The practical limit is your browser's available RAM. Most modern desktops handle large PNG files comfortably. Very large files on memory-constrained mobile devices may be slower to process.

What happens to transparent areas in my PNG?▼

Transparent pixels are preserved in the AVIF output where the browser's AVIF encoder supports alpha channels. Unlike GIF conversion, there is no need to flatten transparency against a background color — AVIF supports full alpha-channel transparency, so your transparent PNG regions remain transparent in the downloaded AVIF file.

PNG to AVIF Crop Converter

What This Tool Does

Who This Is For

PNG vs AVIF: Format Comparison

Frequently Asked Questions

Explore More Tools

Learn More