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

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

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping a TGA image and converting it to an AVIF file using the Data Conversion Center TGA to AVIF Crop Converter. The tool decodes TGA files directly in the browser — no plugin or software needed — and includes a quality slider so you can balance file size against visual fidelity. AVIF preserves full alpha-channel transparency from 32-bit TGA sources, so no background compositing is applied. The entire process takes under two minutes and your image never leaves your device.

Browser note: AVIF encoding requires Chrome 94+, Edge 94+, or Firefox 113+. If you are on an older browser, the tool will display an alert — use a recent Chromium-based browser for AVIF output.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/tga-to-avif-crop/ in Chrome 94+, Edge 94+, or Firefox 113+. No sign-in, no extension, and no download required. The tool works on both desktop and mobile, though desktop browsers typically have more memory available for large TGA files.

Step 2: Load Your TGA

You have two options for loading your source image:

• Drag and drop. Drag a TGA file (with a .tga extension) from your file manager directly onto the drop zone. The image 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 TGA and click Open.

The built-in TGA decoder handles uncompressed (type 2/3) and RLE-compressed (type 10/11) TGA files at 8, 16, 24, and 32 bits per pixel. As soon as decoding completes, the image appears in the source panel with the blue crop handles 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:

• Corner handles (NW, NE, SW, SE). Drag to resize the crop in both dimensions simultaneously — the most common handle for free-form cropping.
• Edge handles (N, S, W, E). Drag to move only that edge, constraining the resize to a single axis. Use these to trim one side without affecting the opposite boundary.
• 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 TGA resolution. The info bar below shows the exact pixel coordinates of the selection.

Step 4: Set the AVIF Quality

Below the crop panels, an AVIF Quality slider lets you choose the compression level before downloading. The slider runs from 50% to 100%:

• 85% (default). An excellent balance for most game assets and photorealistic renders — visually excellent results with files dramatically smaller than the TGA source.
• 70–80%. Aggressively small output for bandwidth-critical web delivery, with some quality trade-off in fine detail areas.
• 90–100%. Maximum fidelity — use when the AVIF will be displayed at large sizes, scrutinised closely, or may be re-processed downstream.

AVIF compression degrades more gracefully than JPEG at lower quality settings, so 70–80% AVIF often looks better than the equivalent JPEG quality.

Step 5: Preview the Crop

Before downloading, click Preview Crop. A pop-up opens showing the cropped region at browser width, with the title displaying the exact output dimensions. Use this to verify:

• The composition is correct and no important detail is clipped.
• Any transparent areas in the TGA (from a 32-bit source) appear correctly — the preview renders transparency as a checkerboard or against the modal background.
• The framing and aspect ratio are appropriate for the intended use.

Close the preview and adjust the handles or quality slider as needed before proceeding.

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. Creates an off-screen canvas and draws the selected pixel region at full TGA resolution using drawImage with source rectangle parameters.
2. Calls canvas.toBlob('image/avif', quality) with the value from the quality slider.
3. Creates a Blob URL for the encoded AVIF and triggers a browser download.

The file downloads as [original-filename]_crop.avif. For a source file named sprite.tga, the output is sprite_crop.avif. No server round-trip occurs at any point.

Step 7: Start Over (Optional)

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

Tips for Best Results

• Use Chrome or Edge for AVIF encoding. AVIF encoding via the Canvas API is most reliably supported in Chromium-based browsers. If the download button shows an alert, switch to Chrome 94+ or Edge 94+.
• Preview before downloading. It is faster to adjust handles and re-preview than to open a downloaded AVIF and discover the crop missed the mark.
• 85% quality is the sweet spot. AVIF at 85% is visually excellent for the vast majority of game assets and renders, with files dramatically smaller than an equivalent JPEG crop.
• Transparency is preserved. AVIF supports full alpha — if your TGA source is 32-bit with transparency, the AVIF output retains it. There is no need to flatten to a white background as you would with JPEG.
• Watch the dimensions badge for exact sizing. If your platform requires a specific pixel size, watch the badge as you drag handles to hit the correct dimensions before downloading.
• TGA source stays untouched. The tool reads your TGA and produces the AVIF without modifying, overwriting, or uploading the original file in any way.