AVIF to PNG Crop Converter
Load an AVIF image, drag the crop handles to define exactly the area you need, preview the result, then download a lossless PNG. Everything runs in your browser — your image never leaves your device.
Drop an AVIF here
or Browse Files · AVIF supported
What This Tool Does
This tool loads an AVIF image directly in your browser, presents an interactive crop overlay with draggable handles, and converts the selected area to a lossless PNG file. No server upload is required. The full workflow — loading, cropping, encoding — runs entirely in client-side JavaScript using the HTML5 Canvas API. AVIF files use AV1 compression that requires full pixel decoding before the canvas can draw them; this tool uses URL.createObjectURL() combined with img.decode() to guarantee the decode is complete before drawing, preventing the silent blank-canvas problem that affects standard Image element loading with AVIF. The output is a lossless PNG with full RGBA support, compatible with every browser, design tool, image editor, and platform.
Who This Is For
- Designers extracting a specific region of an AVIF photo for use in tools that require PNG input
- Web developers converting a cropped AVIF asset to PNG for platforms that do not yet accept AVIF uploads
- Anyone who needs a transparent-background PNG from an AVIF source without losing the alpha channel
- Developers who need a quick crop-and-convert workflow that stays entirely in the browser with no software installation
AVIF vs PNG: Format Comparison
| Property | AVIF | PNG |
|---|---|---|
| Compression | Lossy or lossless (AV1) | Lossless (DEFLATE) |
| File size | Very small — best compression | Larger — lossless storage |
| Transparency support | Yes (alpha channel) | Yes (full RGBA) |
| Browser support | Chrome 85+, FF 93+, Safari 16+ | Universal — every browser |
| Platform upload support | Inconsistent (2026) | Universal |
| Design tool support | Limited | Universal |
| Lossless round-trip | Yes (lossless mode) | Yes — always lossless |
| Best for | Web delivery, maximum compression | Design assets, transparency, broad compatibility |
Frequently Asked Questions
new Image() and FileReader.readAsDataURL(), the browser fires the onload event before the AV1 pixel decoding completes. Calling ctx.drawImage() at that point silently draws a blank canvas — no error, no warning, just empty output. This tool uses URL.createObjectURL() to get a blob URL and then calls img.decode(), which is a Promise that resolves only when the full pixel decode is ready, guaranteeing correct canvas output every time.