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

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

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping a JPG image and converting it to a compact AVIF file using the Data Conversion Center JPG to AVIF Crop Converter. The entire process takes under two minutes and requires no software installation. Your image never leaves your device. AVIF output is typically 40–50% smaller than the equivalent JPG region, making this workflow ideal for optimizing web images before upload.

Browser requirement: AVIF encoding via the Canvas API requires Chrome 85+, Edge 85+, or Firefox 93+. Safari users may experience encoding failures — if so, switch to Chrome for best results.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/jpg-to-avif-crop/ in Chrome, Edge, or Firefox. The tool works on desktop and mobile. No sign-in, no extension, and no download required. If your browser does not support AVIF canvas encoding, the tool displays a yellow warning banner at the top of the page.

Step 2: Load Your JPG

You have two options for loading your source image:

• Drag and drop. Drag a JPG or JPEG 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 JPG and click Open.

As soon as the image loads, it appears in the source panel on the left side of the tool. The blue crop handles appear at the corners and edges of the image, 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.
• 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.

Step 4: Set the Quality

Unlike TIFF (lossless) or PNG, AVIF is a lossy format. The quality slider below the crop panels controls the compression tradeoff:

• Quality 85 (default). Visually indistinguishable from the source for most photographic content. Recommended for hero images, blog post features, and product shots.
• Quality 90–95. Retains more fine detail. Use for close-up product photography, portraits, or any image where fine texture is visible at normal viewing distances.
• Quality 65–80. More aggressive compression. Suitable for thumbnails, decorative backgrounds, or any image where file size is the primary concern.

The quality value maps directly to the quality parameter of the Canvas toBlob API, scaled to a 0–1 range. A quality of 85 becomes 0.85 in the API call.

Step 5: 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 (for example, "Crop Preview — 1600 × 900 px"). Use this to verify your composition — check that you have not clipped important detail at the edges, and confirm the aspect ratio 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 6: Convert & Download the AVIF

When you are satisfied with the crop and quality setting, 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.
2. Calls canvas.toBlob('image/avif', quality) to encode the AVIF using the browser's built-in AV1 encoder.
3. Creates a Blob URL for the encoded file and triggers a browser download.

The file downloads as [original-filename]_crop.avif. For a source file named hero.jpg, the output is hero_crop.avif. The download is immediate — there is no server round-trip. AVIF encoding is CPU-intensive and may take a few seconds for large images, especially at high quality settings.

Step 7: Start Over (Optional)

To crop and convert a different JPG, 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 Chrome or Edge for AVIF encoding. Safari's canvas AVIF encoding is inconsistent. If you see an encoding failure, switch browsers rather than reducing quality.
• Use the Preview before downloading. AVIF encoding takes longer than TIFF generation. It is faster to adjust a handle and re-preview than to wait for a full AVIF conversion and then discover the crop is off.
• Watch the dimensions badge. If your target platform requires a specific pixel size (for example, 1200×628 for Open Graph images), keep an eye on the badge as you drag handles.
• For large files on mobile. High-resolution JPGs (20 MP+) may take several seconds to encode on mobile devices. AVIF encoding is significantly more CPU-intensive than TIFF or WebP generation. This is normal — wait for the "Converting…" label to clear.
• Always provide a fallback. AVIF is not supported in Internet Explorer or older browsers. Use a <picture> element with a JPG fallback when embedding the AVIF in a web page.