How to Crop & Convert PNG to AVIF: Step-by-Step Tutorial

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

Connect on LinkedIn →

Overview

This tutorial walks you through every step of using the PNG to AVIF Crop Converter — from loading your source PNG to downloading the final AVIF file. The entire process runs in your browser: no account required, no upload to any server, and no software to install. By the end you will have a cropped AVIF file ready for next-gen web delivery.

If you want background on why and when to crop and convert PNG to AVIF, see the complete guide. This tutorial focuses purely on the step-by-step how.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/png-to-avif-crop/ in any modern browser. The tool works in Chrome, Firefox, Edge, and Safari — on desktop or mobile. No login, no extension, and no app installation is required. For best AVIF output, use Chrome 85+, Firefox 93+, or Edge 121+. Safari users will see a compatibility note and receive a PNG fallback if needed.

Step 2: Load Your PNG

You have two ways to load your file:

• Drag and drop. Drag your PNG file from your desktop or file manager and drop it onto the upload area. The dashed border highlights when you hover over it to confirm it is ready to accept the drop.
• Browse Files. Click anywhere in the upload area (or click the "Browse Files" link) to open your system file picker. Select your PNG file and click Open.

The tool accepts PNG files only (.png extension or image/png MIME type). If you drop a non-PNG file, the tool will alert you. Once the file loads, the drop zone is replaced by the two-panel crop interface.

Step 3: Adjust the Crop Handles

The source panel on the left shows your PNG with a dashed blue crop rectangle overlaid on top. By default the crop rectangle covers the entire image. You adjust it using the blue handles around the perimeter:

• Corner handles (NW, NE, SW, SE). Dragging a corner handle resizes both the width and height simultaneously. This is the fastest way to define a crop that changes both dimensions at once.
• Edge handles (N, S, W, E). Dragging an edge handle moves only that edge, constraining the resize to a single axis. Use this to trim from one side without affecting the perpendicular dimension.
• Interior pan. Click and drag anywhere inside the crop rectangle (not on a handle) to reposition the entire selection without changing its dimensions.

As you drag, the crop dimensions badge in the panel header updates in real time to show the output pixel dimensions at full image resolution. These are the exact dimensions of the AVIF file that will be downloaded.

Step 4: Preview the Crop

Before committing to a download, click Preview Crop. A pop-up window opens showing the cropped region rendered as a preview at the full output resolution. The pop-up title displays the exact output dimensions (e.g., "Crop Preview — 400 × 300 px"). The preview renders on a transparent checkerboard pattern where the PNG has transparent areas, so you can see exactly how transparency will look in the output. Use this to verify your composition and confirm the crop covers exactly the area you want.

Close the preview with the × button or by clicking outside the modal. Return to the source panel and adjust the handles if needed. You can preview as many times as you like.

Step 5: Convert & Download the AVIF

When you are satisfied with the crop, click Convert & Download AVIF. The button briefly shows "⏳ Converting…" while the tool:

1. Draws the selected pixel region from the decoded PNG onto an off-screen canvas at full image resolution, preserving alpha-channel transparency — no background fill is applied.
2. Calls canvas.toBlob('image/avif') to encode the canvas content as an AVIF binary using the browser's native AVIF encoder.
3. Creates a temporary object URL for the resulting Blob and triggers a browser download. If AVIF encoding is unsupported, the tool falls back to PNG automatically.

The file downloads as [original-filename]_crop.avif. For a source file named banner.png, the output is banner_crop.avif. The download is immediate — there is no server round-trip.

Step 6: Start Over (Optional)

To crop and convert a different PNG, click ↺ Start Over. This clears the current image, resets the crop handles, and returns the tool to its initial drop zone state. You can then load a new PNG file and repeat the process.

What to Expect: Quality and Transparency

Two things define the appearance of your AVIF output relative to the source PNG:

Quality level. The tool uses the browser's default AVIF quality setting, which is typically equivalent to quality 0.8–0.9 out of 1.0. At this setting, the output is visually near-identical to the source PNG — the compression difference is difficult to perceive at normal screen viewing distances. The resulting file will be approximately 50–60% smaller than an equivalent lossless PNG for photographic content.

Transparency is fully preserved. Unlike some other format conversions, PNG-to-AVIF does not require you to fill transparent areas with a background color. AVIF supports the same full alpha-channel transparency as PNG. Transparent regions in your source PNG remain transparent in the AVIF output. If you are converting an icon, logo, or UI element with a transparent background, the output AVIF will be ready for use directly over any background on your webpage.

Tips for Best Results

• Crop as tightly as possible around the subject. Every pixel removed before conversion reduces the output file size proportionally. A tightly cropped AVIF is significantly smaller than a full-canvas AVIF of the same subject.
• Use the preview before downloading. The preview shows you the exact crop region at full resolution and correctly shows transparent areas as a checkerboard. Verify the composition before committing to the download.
• Check the dimensions badge before downloading. The badge shows the full-resolution pixel dimensions of your AVIF output. Verify the dimensions match your target specification before downloading.
• Use Chrome or Firefox for guaranteed AVIF output. Safari's canvas AVIF encoder is not fully supported in all versions. Chrome 85+ and Firefox 93+ provide the most reliable AVIF encoding from this tool.
• For batch conversion without cropping, use the PNG to AVIF Converter. The crop tool is designed for single-file crop workflows. If you need to convert multiple PNG files to AVIF in bulk without cropping, the standalone converter is the right tool.