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

By Bill Crawford  ·  March 2026  ·  5 min read  ·  Last updated March 11, 2026

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping an AVIF image and converting it to a lossless PNG file using the Data Conversion Center AVIF to PNG Crop Converter. The entire process takes under two minutes and requires no software installation. Your image never leaves your device.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/avif-to-png-crop/ in any modern browser. The tool works in Chrome 85+, Firefox 93+, Edge 121+, and Safari 16+ on both desktop and mobile — these are the same browsers that support AVIF decoding. No sign-in, no extension, and no download required.

Step 2: Load Your AVIF

You have two options for loading your source image:

• Drag and drop. Drag an AVIF file from your file manager directly onto the drop zone in the tool. The file loads the moment you release it.
• Browse. Click anywhere on the drop zone (or the "Browse Files" link) to open your operating system's file picker. Select your AVIF and click Open.

Unlike JPEG or PNG, AVIF requires full AV1 pixel decoding before it can appear on screen. The tool uses img.decode() to guarantee this step completes before drawing — so there may be a brief pause on very large AVIF files while the AV1 decoder finishes. Once loaded, the image appears in the source panel with blue crop handles at all corners and edge midpoints.

Step 3: Adjust the Crop Area

The crop overlay has eight handles: four at the corners and four at the midpoints of each edge. Here is how each type behaves:

• Corner handles (NW, NE, SW, SE). Dragging a corner handle resizes the crop in both dimensions simultaneously. This is the most common handle for free-form cropping.
• Edge handles (N, S, W, E). Dragging an edge handle moves only that edge, constraining the resize to a single axis. Drag the top edge down to trim from the top without affecting the left or right boundaries.
• 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. The info bar below the source image shows the exact pixel coordinates of the crop rectangle's origin and extent.

Step 4: Preview the Crop

Before committing to a download, click Preview Crop. A pop-up window opens showing the cropped region rendered at full browser width. The pop-up title displays the exact output dimensions (e.g., "Crop Preview — 1200 × 800 px"). Use this to verify your composition — check that you have not clipped important detail at the edges, and confirm the framing looks correct for your intended use.

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 with no penalty.

Step 5: Convert & Download the PNG

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

1. Draws the selected pixel region onto an off-screen canvas at full image resolution using drawImage with source rectangle parameters.
2. Calls canvas.toBlob('image/png') to encode the cropped region as a lossless PNG.
3. Creates a Blob URL for the encoded file and triggers a browser download.

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

Step 6: Start Over (Optional)

To crop and convert a different AVIF, click ↺ Start Over. This clears the current image, resets the crop handles, and returns the tool to its initial drop zone state.

Tips for Best Results

• Use the Preview before downloading. It is much faster to adjust a handle and re-preview than to open the downloaded PNG and discover the crop is off by 20 pixels.
• Watch the dimensions badge. If your target platform requires a specific pixel size (e.g., 1200×630 for Open Graph images, 800×800 for an avatar), keep an eye on the badge as you drag handles to reach the correct value.
• For large AVIF files, wait for the decode. Very high-resolution AVIFs may take a moment to decode on first load due to AV1's computational complexity. The image appears in the source panel only after decoding is complete — this is intentional and ensures correct pixel output.
• Transparency is preserved. If your AVIF source has an alpha channel, the output PNG will retain full RGBA transparency. PNG is the best lossless format for images with transparent backgrounds.
• Expect larger output files. PNG is lossless and produces larger files than AVIF. A 100 KB AVIF can produce a 2–10 MB PNG depending on resolution and content. This is normal behavior — if size is critical, consider keeping the file in AVIF format.