PNG to AVIF Crop: Complete Conversion Guide for Web Performance

By Bill Crawford  ·  March 2026  ·  9 min read  ·  Last updated March 12, 2026

Connect on LinkedIn →

What Is AVIF and Why Does It Matter?

AVIF (AV1 Image File Format) is a next-generation image format based on the AV1 video codec, developed by the Alliance for Open Media. It delivers dramatically better compression than older formats — producing files that are 50–60% smaller than equivalent PNGs at comparable visual quality. AVIF supports full alpha-channel transparency, HDR color, wide color gamuts, and both lossy and lossless compression modes.

As of 2026, AVIF is supported by Chrome 85+, Firefox 93+, Edge 121+, and Safari 16+, covering the vast majority of global browser usage. Its combination of superior compression, full transparency support, and growing browser coverage makes it the most powerful modern alternative to PNG for web delivery of graphics, photographs, and interface assets.

What Is PNG and Why Use It as a Source?

PNG (Portable Network Graphics) is the dominant format for web graphics, screenshots, and source artwork. It uses lossless DEFLATE compression with no palette limitation, full alpha-channel transparency, and universal browser support. PNG is the standard for production assets precisely because it preserves every pixel without quality loss.

As a result, designers and developers commonly hold large PNG source files — product images, UI assets, marketing banners, icons, and screenshots — that need to be delivered as smaller, faster web files. Converting from PNG to AVIF reduces file size by 50–60% on average while preserving visual quality and transparency. Adding a crop step before conversion lets you extract exactly the region you need and export it as an optimized AVIF asset in a single browser-based operation.

Understanding AVIF File Size Savings

The size reduction when converting PNG to AVIF comes from AVIF's AV1-based compression, which uses advanced prediction and entropy coding far beyond what PNG's DEFLATE can achieve. For photographic content, AVIF at default quality settings typically delivers 50–60% smaller files than lossless PNG with barely perceptible quality differences at normal screen viewing distances. For transparent graphics like icons and UI elements, AVIF similarly outperforms PNG in file size while preserving every pixel of alpha data.

These savings compound when you add cropping. A full-page screenshot PNG converted to AVIF saves 55% over the original. But if you only need a 400×300 logo region from that same PNG, cropping first eliminates all the pixels you do not need before AVIF encoding — potentially reducing file size by 85–95% compared to converting the full image. The crop step is not just cosmetic; it directly reduces the number of pixels the AVIF encoder must process.

Transparency Handling: PNG Alpha to AVIF

PNG supports full alpha-channel transparency — every pixel can have an opacity value from 0 (fully transparent) to 255 (fully opaque), with any intermediate value representing partial transparency. AVIF also supports full alpha-channel transparency at the same per-pixel precision. This makes PNG-to-AVIF one of the few format conversions where transparency is preserved without any approximation or background fill.

When you crop a PNG with transparent areas and convert to AVIF, the transparent and semi-transparent pixels in the selected region are encoded in the AVIF output at their original opacity values. Unlike PNG-to-GIF conversion — where GIF's 1-bit transparency forces transparent pixels to be filled against a background color — PNG-to-AVIF conversion preserves every pixel's exact alpha value. Your transparent icons, logos, and UI elements remain correctly transparent in the AVIF output.

When Should You Crop and Convert PNG to AVIF?

• Delivering optimized web assets from large source PNG files. Marketing PNGs, UI design exports, and product images are often much larger than the region actually displayed. Crop to the required viewport area and convert to AVIF to minimize delivery size.
• Replacing PNG assets in web projects with smaller AVIF equivalents. If your site currently serves PNG files and you need AVIF versions with identical transparent regions, crop-convert produces the exact output dimensions and transparency you need.
• Extracting transparent icons or logos from multi-element PNG sources. A single PNG might contain multiple icons or a logo on a transparent background. Crop to the specific element and export as AVIF for individual use.
• Improving Core Web Vitals scores. Serving AVIF instead of PNG reduces LCP (Largest Contentful Paint) times and overall page weight more aggressively than any other format switch. Cropping to the displayed region removes unnecessary pixels before encoding.
• Preparing images for next-gen CMS platforms and frameworks. Many modern frameworks support AVIF inputs for their image optimization pipelines. Cropping and converting PNGs to AVIF upstream simplifies the build process.

Best PNG Candidates for AVIF Conversion

PNG-to-AVIF conversion works well for virtually any type of PNG. Photographic PNGs convert to AVIF with excellent quality at file sizes 50–60% smaller. Graphics with flat colors convert cleanly. PNGs with complex transparency — semi-transparent shadows, feathered edges, transparent UI elements — all convert without any approximation because AVIF preserves full alpha data.

The only scenario where PNG-to-AVIF may require extra consideration is when AVIF encoding support is needed in Safari. Safari 16+ supports AVIF display, but canvas AVIF output is not uniformly supported across all Safari versions. The browser-based crop tool handles this gracefully by falling back to PNG download when AVIF output is unavailable. For production workflows requiring guaranteed AVIF output in all browsers, a server-side AVIF encoder is the most reliable approach.

Why Crop Before Converting to AVIF?

Cropping before conversion has a direct performance benefit. Every pixel you remove from the crop area is a pixel the AVIF encoder does not need to process and encode. If your source PNG is a 2000×1500 screenshot and you only need a 600×400 product region, cropping first and then converting means the encoder works with 240,000 pixels instead of 3,000,000 — a 12.5× reduction in work, producing a proportionally smaller output file.

A common scenario: a design team exports a full-width banner PNG at 1920×600 for a landing page. The actual hero section needs only the 800×500 left portion. Cropping to that region and converting to AVIF in a single browser operation produces a final AVIF asset that is both correctly sized and maximally compressed — ready for <img> or <picture> delivery without any further processing.

PNG vs AVIF: Format Comparison

Tradeoffs: When to Keep PNG Instead of Converting

PNG remains the right choice when pixel-perfect lossless fidelity is required — for medical imaging, scientific data visualization, archival storage, or any workflow where the file will undergo further editing. PNG is also the safer choice when the destination platform has not adopted AVIF support, though this is increasingly rare as of 2026.

For web delivery, AVIF is the best-performing option when browser support is confirmed. The main practical limitation of the browser-native AVIF encoder used in this tool is Safari's incomplete canvas AVIF output support. For guaranteed cross-browser AVIF production, a server-side encoder or build-tool pipeline is recommended. For all Chrome, Firefox, and Edge users, the browser-based crop-convert workflow produces optimal AVIF output directly.

How the Crop and Conversion Workflow Works

The PNG to AVIF Crop Converter loads your file using URL.createObjectURL(file) to create a temporary object URL, assigns it to an HTMLImageElement, and awaits img.decode() before drawing. This guarantees the full pixel decode is complete before any canvas operations begin. The image is drawn onto an HTML5 Canvas scaled to fit the display panel, with the canvas dimensions calculated from the container's client width to prevent overflow.

An SVG overlay renders the crop rectangle and handles. When you drag a handle, the tool maps canvas coordinates back to the original image's pixel dimensions using a scale factor. When you click Convert & Download AVIF, an off-screen canvas draws the selected PNG region at full resolution — with transparency preserved by the canvas 2D compositing context — and canvas.toBlob('image/avif') encodes the result as an AVIF binary. If AVIF encoding fails (e.g., in Safari), the tool falls back to PNG automatically.

Frequently Asked Questions

Does converting PNG to AVIF preserve transparency?

Yes. AVIF supports full alpha-channel transparency at the same per-pixel precision as PNG. Transparent and semi-transparent pixels in the selected crop region are preserved in the AVIF output without any background fill. This is one of AVIF's key advantages for converting transparent PNG assets.

How much smaller will the AVIF file be compared to the source PNG?

For photographic content, AVIF is typically 50–60% smaller than equivalent PNG files at comparable visual quality. For simple graphics, the savings are usually 20–40%. For very detailed PNGs, savings can exceed 60%. The exact reduction depends on image content and the quality level used during encoding.

Is the conversion really done in the browser with no upload?

Yes. The PNG to AVIF Crop Converter loads your file locally, performs all cropping and encoding operations in JavaScript using the HTML5 Canvas API, and produces the download entirely in memory. No file is transmitted to any server at any point. Your image stays on your device throughout the entire process.

Why does the tool fall back to PNG on some browsers?

AVIF encoding via the canvas.toBlob API requires browser-native AVIF encoder support. Chrome 85+, Firefox 93+, and Edge 121+ support this natively. Safari supports AVIF display but does not yet support canvas AVIF output in all versions. When AVIF encoding is unavailable, the tool automatically falls back to PNG download rather than failing silently.