How to Crop & Convert BMP to AVIF: 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 a BMP image and converting it to a next-gen AVIF file using the Data Conversion Center BMP to AVIF 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/bmp-to-avif-crop/ in any modern browser. The tool works in Chrome 85+, Firefox 93+, Edge 121+, and Safari 16+ on both desktop and mobile. AVIF encoding requires Chrome, Firefox, or Edge — Safari supports AVIF rendering but not canvas encoding. No sign-in, no extension, and no download required.

When the page loads, a compatibility check runs automatically in the background. If your browser does not support AVIF canvas encoding, a warning banner will appear before you load any file.

Step 2: Load Your BMP

You have two options for loading your source image:

• Drag and drop. Drag a BMP 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 BMP file and click Open.

The tool uses URL.createObjectURL combined with img.decode() to load the BMP. The img.decode() promise resolves only when the image is fully decoded and ready to paint, ensuring the canvas never receives incomplete pixel data. As soon as loading completes, the image appears in the source panel with blue crop handles at the corners and edges, initially set to the full image boundary.

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 — drag the bottom-right corner inward to shrink from that corner, outward to expand.
• Edge handles (N, S, W, E). Dragging an edge handle moves only that edge, constraining the resize to a single axis. Use these when you need to trim one side precisely without affecting the perpendicular boundary.
• Interior pan. Click and drag anywhere inside the crop rectangle (not on a handle) to reposition the entire selection without changing its dimensions. Use this to slide the selection to a different area of the image after setting the size.

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 (not the display size). 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 — 2400 × 1600 px"). Use this to verify your composition — confirm you have not clipped important content at the edges and that the aspect ratio is 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 before downloading.

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 onto an off-screen canvas at full image resolution using drawImage with source rectangle parameters.
2. Encodes the off-screen canvas to AVIF format using the browser's native canvas.toBlob('image/avif') API.
3. Creates a Blob URL for the encoded AVIF file and triggers a browser download.

The file downloads as [original-filename]_crop.avif. For a source file named scan.bmp, the output is scan_crop.avif. The download is immediate — there is no server round-trip at any point in this process.

If your browser does not support AVIF encoding, the download will automatically fall back to a PNG file instead, and the filename will use the _crop.png extension.

Step 6: Start Over (Optional)

To crop and convert a different BMP, 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 discover a compositional problem after opening the downloaded AVIF in an application.
• Watch the dimensions badge. If your target platform requires a specific pixel size — e.g., 1200×630 px for an Open Graph image — keep an eye on the badge as you drag handles to reach the exact required value.
• Large BMP files are fine on desktop. BMP files are often very large due to their uncompressed nature. Modern desktop browsers handle BMPs of 50 MB or larger without difficulty. Mobile devices with limited RAM may take a few extra seconds to decode very large BMPs.
• Check the compat warning before starting. If the AVIF compatibility warning banner appears, switch to Chrome, Firefox, or Edge to get AVIF output. Otherwise you will download PNG.
• Crop content first, then check dimensions. Set your crop composition correctly first, then verify the output dimensions in the badge. If you need an exact pixel size, use the Image Resizer tool as a follow-up step.