Sourav Mukherjee
@Design By
100% FREE LIFETIME
100% FREE LIFETIME

Convert Any Image to AVIF

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap’); .converter-container { font-family: ‘Inter’, system-ui, sans-serif; } .title-font { font-family: ‘Playfair Display’, serif; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.6s ease-out forwards; } .drop-active { background-color: rgba(129, 140, 248, 0.1); border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }
🖼️→AVIF

Convert Any Image to AVIF

Upload JPG, PNG, HEIC, WebP, SVG, PSD, ARW, TIFF, GIF & more → high-quality AVIF instantly.
Best compression • Lossy or Lossless • 100% browser-based & private. Learn more about convert image to avif.

⬆️

Drag & Drop or Click to Upload

Supports ALL common formats including HEIC, WebP, ARW, SVG & PSD*

đź“‹ How to Use This Tool

  1. Drag & drop your image or click the upload area to select a file (JPG, PNG, HEIC, WebP, ARW, etc.)
  2. Adjust the Quality slider (lower = smaller file, higher = better quality)
  3. Turn on Lossless Mode for perfect quality with no compression loss
  4. Click Convert to AVIF — conversion happens instantly in your browser
  5. Check the live size comparison and savings percentage
  6. Click Download .avif to save the converted file

*Note: AVIF encoding works best in Chrome, Edge & Opera (2026+). Firefox & Safari may show “not supported” for encoding.

// Global variables let selectedFile = null; let avifBlob = null; let avifObjectURL = null; const dropArea = document.getElementById(‘drop-area’); const fileInput = document.getElementById(‘file-upload’); const converterArea = document.getElementById(‘converter-area’); const origPreview = document.getElementById(‘preview-original’); const avifPreview = document.getElementById(‘preview-avif’); const origStats = document.getElementById(‘original-stats’); const avifStats = document.getElementById(‘avif-stats’); const qualitySlider = document.getElementById(‘quality-slider’); const qualityValue = document.getElementById(‘quality-value’); const losslessToggle = document.getElementById(‘lossless-toggle’); const convertBtn = document.getElementById(‘convert-btn’); const downloadBtn = document.getElementById(‘download-btn’); const resetBtn = document.getElementById(‘reset-btn’); const savingsLine = document.getElementById(‘savings-line’); // Events dropArea.addEventListener(‘click’, () => fileInput.click()); [‘dragover’,’dragenter’].forEach(ev => { dropArea.addEventListener(ev, e => { e.preventDefault(); dropArea.classList.add(‘drop-active’); }); }); [‘dragleave’,’drop’].forEach(ev => { dropArea.addEventListener(ev, e => { e.preventDefault(); dropArea.classList.remove(‘drop-active’); }); }); dropArea.addEventListener(‘drop’, e => { const file = e.dataTransfer.files[0]; if (file?.type.startsWith(‘image/’)) handleFile(file); }); fileInput.addEventListener(‘change’, e => { const file = e.target.files[0]; if (file) handleFile(file); }); qualitySlider.addEventListener(‘input’, () => { qualityValue.textContent = qualitySlider.value; }); convertBtn.addEventListener(‘click’, convertToAVIF); resetBtn.addEventListener(‘click’, resetAll); downloadBtn.addEventListener(‘click’, downloadAVIF); // Functions function handleFile(file) { selectedFile = file; downloadBtn.disabled = true; if (avifObjectURL) URL.revokeObjectURL(avifObjectURL); avifBlob = null; avifObjectURL = null; const reader = new FileReader(); reader.onload = e => { origPreview.src = e.target.result; origStats.innerHTML = `
File: ${file.name}
Size: ${(file.size / 1024 / 1024).toFixed(2)} MB
Type: ${file.type.split(‘/’)[1]?.toUpperCase() || file.type}
`; converterArea.classList.remove(‘hidden’); savingsLine.classList.add(‘hidden’); avifPreview.src = ”; avifStats.innerHTML = ”; }; reader.readAsDataURL(file); } async function convertToAVIF() { if (!selectedFile) return alert(“Please upload an image first”); convertBtn.disabled = true; convertBtn.innerHTML = ‘Converting to AVIF… ↻‘; try { const img = await loadImage(URL.createObjectURL(selectedFile)); const canvas = document.createElement(‘canvas’); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; canvas.getContext(‘2d’).drawImage(img, 0, 0); const quality = losslessToggle.checked ? 1.0 : (parseInt(qualitySlider.value) / 100); canvas.toBlob(blob => { if (!blob || blob.type !== ‘image/avif’) { throw new Error(“AVIF encoding not supported in this browser”); } avifBlob = blob; if (avifObjectURL) URL.revokeObjectURL(avifObjectURL); avifObjectURL = URL.createObjectURL(blob); avifPreview.src = avifObjectURL; const origMB = (selectedFile.size / 1024 / 1024).toFixed(2); const avifMB = (blob.size / 1024 / 1024).toFixed(2); const savings = (((selectedFile.size – blob.size) / selectedFile.size) * 100).toFixed(1); avifStats.innerHTML = `
AVIF Size: ${avifMB} MB
Mode: ${losslessToggle.checked ? ‘Lossless’ : `Lossy (${Math.round(quality*100)}%)`}
Resolution: ${img.naturalWidth} Ă— ${img.naturalHeight}
`; savingsLine.innerHTML = `Original: ${origMB} MB → AVIF: ${avifMB} MB (-${savings}% savings)`; savingsLine.classList.remove(‘hidden’); downloadBtn.disabled = false; convertBtn.disabled = false; convertBtn.innerHTML = ‘Convert to AVIF →‘; }, ‘image/avif’, quality); } catch (err) { console.error(err); alert(“AVIF encoding failed.\n\nThis browser may not support AVIF encoding yet.\nTry Chrome / Edge / Opera (recommended).”); convertBtn.disabled = false; convertBtn.innerHTML = ‘Convert to AVIF →‘; } } function loadImage(src) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = () => reject(new Error(“Failed to load image”)); img.src = src; }); } function downloadAVIF() { if (!avifBlob) { alert(“Please convert first”); return; } const url = URL.createObjectURL(avifBlob); const a = document.createElement(‘a’); a.href = url; a.download = (selectedFile.name || ‘image’).replace(/\.[^.]+$/, ”) + ‘.avif’; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100); } function resetAll() { if (avifObjectURL) URL.revokeObjectURL(avifObjectURL); selectedFile = null; avifBlob = null; avifObjectURL = null; fileInput.value = ”; converterArea.classList.add(‘hidden’); savingsLine.classList.add(‘hidden’); origPreview.src = ”; avifPreview.src = ”; origStats.innerHTML = ”; avifStats.innerHTML = ”; downloadBtn.disabled = true; } qualityValue.textContent = qualitySlider.value;
allbesttool.com
Latest posts by allbesttool.com (see all)