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

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

Connect on LinkedIn →

Overview

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

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/dds-to-avif-crop/ in any modern browser. The tool works in Chrome, Firefox, Edge, and Safari on both desktop and mobile. No sign-in, no extension, and no download required. Note that AVIF export requires a browser with AVIF encoding support — Chrome 94+ and Edge 94+ are the most reliable choices. If your browser does not support AVIF encoding, the tool will display a warning.

Step 2: Load Your DDS File

You have two options for loading your source texture:

• Drag and drop. Drag a DDS file from your file manager directly onto the drop zone in the tool. The file decodes 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 DDS file and click Open.

As soon as the texture loads, it appears in the source panel. The blue crop handles appear at the corners and edges of the image, initially set to the full texture boundary. The tool supports all common DDS compression formats including DXT1 (BC1), DXT3 (BC2), DXT5 (BC3), BC4, BC5, BC7, and uncompressed RGBA/BGRA/RGB layouts. The decoder reads the DDS header automatically to determine the correct format — you do not need to specify it.

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. Drag the bottom-right corner inward to shrink from that corner, outward to expand. 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. Use this to slide the selection to a different area of the texture 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 texture 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 — 512 × 512 px"). Use this to verify your composition — check that you have not clipped important texture detail at the edges, and confirm the region 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 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 texture resolution.
2. Reads the decoded RGBA pixel data from that canvas.
3. Encodes the cropped area as an AVIF file using the browser's native canvas.toBlob('image/avif') API — no external library or server required.
4. 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 character_diffuse.dds, the output is character_diffuse_crop.avif. The download is immediate — there is no server round-trip.

Step 6: Start Over (Optional)

To crop and convert a different DDS texture, 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 AVIF and discover the crop is off.
• Watch the dimensions badge. If your web workflow requires a specific pixel size, keep an eye on the badge as you drag handles to reach the correct value.
• Crop to content, not to a size. Set the crop where the texture content is correct first, then check the dimensions. If you need an exact pixel size, use the Image Resizer tool as a second step after downloading the AVIF.
• DDS compression formats and transparency. DXT1 textures may use 1-bit alpha punch-through. DXT3 and DXT5 carry full alpha channels. The AVIF output preserves transparency from the decoded DDS data, so your crop will retain any alpha information the source texture contained.
• Browser compatibility for AVIF. AVIF encoding requires Chrome 94+, Edge 94+, or another browser with native AVIF encoding support. If the tool warns that AVIF is not supported, switch to Chrome or Edge. The resulting AVIF files are viewable in all modern browsers, image viewers, and CMS platforms that support the format.
• Power-of-two textures. Game engine DDS textures are often sized as powers of two (256×256, 512×512, 1024×1024, etc.). The crop tool does not enforce power-of-two constraints on the output — you can crop to any rectangle. If you need power-of-two output, plan your handles accordingly.