DDS to AVIF Crop: Complete Conversion Guide for Game Textures & Web

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

Connect on LinkedIn →

What Is AVIF and Why Convert DDS to AVIF?

AVIF (AV1 Image File Format) is a modern image format based on the AV1 video codec's intra-frame compression. Developed by the Alliance for Open Media, AVIF has been supported by all major browsers since 2021–2022 and offers substantially better compression than older formats like JPEG and PNG at equivalent visual quality. AVIF supports full-color 24-bit imagery, 10-bit and 12-bit high-dynamic-range content, optional alpha channels, and both lossy and lossless compression modes. Unlike DDS, AVIF files are viewable directly in any modern browser, desktop file explorer, and operating system image viewer without any plugin or conversion step.

DDS (DirectDraw Surface) files, by contrast, are designed for one purpose: storing textures in GPU-ready block-compressed formats for use in real-time rendering. A DDS file with DXT5 compression is optimized for fast GPU upload and sampling, not for web delivery or sharing. To display a DDS image on a web page, embed it in a document, or share it with someone who does not have a game engine or 3D tool installed, you must convert it to a web-friendly format first. AVIF is the best modern choice: smallest files, widest modern browser support, and full alpha channel preservation.

Understanding DDS Compression Formats

DDS files store textures in one of several block compression formats, each serving a different purpose in game development workflows. Understanding which format your DDS file uses helps you predict the quality of the decoded result.

DXT1 (BC1) is the most space-efficient block format, storing 4 bits per pixel. It encodes each 4×4 texel block using two 16-bit colors and a 2-bit index per texel, producing a compressed size of 8 bytes per 4×4 block. DXT1 supports only 1-bit (on/off) transparency. It is best suited for fully opaque diffuse textures and produces visible block artifacts at high compression ratios.

DXT3 (BC2) adds explicit 4-bit alpha per texel, storing 16 bytes per 4×4 block (double DXT1). The alpha channel is linear and uncompressed, making DXT3 better than DXT1 for textures with sharp alpha transitions but less efficient for smooth gradients.

DXT5 (BC3) uses the same color encoding as DXT3 but replaces the explicit alpha with an interpolated 3-bit alpha index scheme (similar to the color encoding). This produces much smoother alpha gradients and is the most common format for textures that require semi-transparency — particles, hair, foliage, UI elements with soft edges.

BC4 stores a single channel (typically used for grayscale height maps or roughness maps) using the same interpolated scheme as DXT5's alpha channel at 4 bits per pixel. BC5 stores two channels (typically tangent-space normal map X and Y components) and reconstructs the Z component mathematically. BC7 is a high-quality format that uses a more complex partition-based encoding to minimize block artifacts, often used for high-fidelity diffuse and detail textures in modern games.

When Should You Crop and Convert DDS to AVIF?

• Sharing game texture crops on the web. If you want to display a detail shot of a game texture — a portion of a diffuse map, normal map detail, or surface pattern — AVIF lets you share it at minimal file size while preserving visual quality.
• Extracting a region from a texture atlas. Many games pack multiple objects' textures into a single large DDS atlas. The crop tool lets you isolate a specific region and export it as a standalone AVIF without needing a game editor or plugin.
• Converting mod assets for web documentation. Mod authors documenting their work on wikis or websites need web-compatible images. The DDS to AVIF crop tool converts directly from the source format without an intermediate step.
• Archiving selected texture regions. If you need to preserve a specific region of a game texture for reference or documentation, AVIF provides an excellent compression-to-quality ratio for long-term storage.
• Removing mipmap padding or power-of-two padding. Many DDS textures have padding to reach power-of-two dimensions required by older GPUs. The crop tool lets you trim the actual content region before exporting.

DDS vs AVIF: Format Comparison

How the DDS Crop and Conversion Workflow Works

The DDS to AVIF Crop Converter loads your file using the browser's FileReader.readAsArrayBuffer API and passes the raw binary to a JavaScript DDS decoder. The decoder reads the DDS file header at offset 0 (magic number 0x20534444), extracts the image dimensions from the DWORD fields at offsets 12 and 16, and determines the pixel format from the DDPF structure at offset 76. Based on the FourCC code or DXGI format ID, the decoder dispatches to the appropriate block decompressor function.

For DXT1/BC1, each 8-byte block encodes two 16-bit RGB565 endpoint colors and sixteen 2-bit indices. The decoder reconstructs four interpolated colors from the endpoints and maps each texel index to a color, writing the result to a flat RGBA Uint8ClampedArray at the correct offset. For DXT5/BC3, each 16-byte block contains an 8-byte alpha block (two 8-bit alpha endpoints with six 3-bit indices) followed by an 8-byte color block. BC7 uses a more complex mode-based system with per-block partition tables, which the decoder handles through bitstream reading. Uncompressed DDS formats are parsed by reading the DDPF bitmask fields and extracting channel values directly.

The decoded RGBA array is placed into an ImageData object and drawn onto an HTML5 Canvas via putImageData. An SVG overlay then renders the interactive crop rectangle and drag handles on top. When you click Convert & Download AVIF, the selected region is drawn onto an off-screen canvas using drawImage with source rectangle parameters mapped back to full-resolution coordinates, and canvas.toBlob('image/avif', quality) is called to produce the final AVIF file.

AVIF Quality and File Size Considerations

The AVIF encoder used by the tool is the browser's native implementation, typically libaom (Chrome, Edge) or dav1d (Firefox). The tool uses a default quality of 0.85 (85%), which provides an excellent balance of visual quality and file size for most game texture content. Unlike JPEG where quality is a direct encoder parameter, AVIF quality is expressed as a ratio between 0.0 (maximum compression, lowest quality) and 1.0 (minimum compression, highest quality) in the toBlob API.

For textures with fine detail, sharp edges, or text — such as UI texture atlases — you may prefer higher quality (0.90–0.95) to avoid AVIF's tendency to soften fine lines. For organic textures like grass, stone, or sky — where slight softening is imperceptible — the default 0.85 typically produces files significantly smaller than the source DDS at near-identical visual quality.

Frequently Asked Questions

Does cropping a DDS texture before saving as AVIF affect quality?

Cropping selects a region of the decoded texture and discards the rest. The decoded pixel values are exactly what the DDS block decompressor produces — DXT5's smooth alpha interpolation, BC7's high-quality endpoint encoding, and so on. The AVIF encoder then works with those decoded pixels. Cropping to the relevant content area first means the AVIF encoder concentrates its bit budget on actual content rather than unused texture space, potentially improving quality for the same file size target.

Will the AVIF file be smaller than the source DDS?

For most game texture content, yes. DDS block compression formats achieve roughly 4:1 to 8:1 compression over raw RGBA at fixed quality. AVIF's AV1-based coding typically achieves 15:1 to 40:1 compression over raw pixels for photographic or semi-photographic content at high quality settings. The exact ratio depends heavily on texture content — textures with complex gradients and organic detail compress best; textures with fine high-frequency detail or sharp edges may have a smaller AVIF advantage.

Can I use the output AVIF in a web page?

Yes. AVIF is supported natively in all major modern browsers without any plugin. You can use it directly in an <img> tag or as a CSS background image. For maximum compatibility including older browsers, wrap it in a <picture> element with a JPEG or PNG fallback.

Is the conversion free with no file size limit?

Yes. All processing runs entirely in your browser — no server receives your file. There are no usage caps, no watermarks, and no account required. The only practical limit is your device's available RAM for very large DDS textures.