AVIF Alpha Transparansi Best Practice 2025 — Implementasi Efisien tanpa Degradasi

<picture>
  <source srcset="overlay.avif" type="image/avif">
  <source srcset="overlay.webp" type="image/webp">
  <img src="overlay.png" alt="Overlay grafis" loading="lazy">
</picture>

// Feature detection untuk AVIF alpha
function supportsAVIFAlpha() {
  return new Promise(resolve => {
    const avif = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUEAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgABogQEAwgMg8f8D///8WfhwB8+ErK42A=';
    const img = new Image();
    img.onload = img.onerror = () => resolve(img.height === 2);
    img.src = avif;
  });
}

const lazyAVIF = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      // Load AVIF jika supported, fallback ke WebP/PNG
      loadOptimalFormat(img);
      lazyAVIF.unobserve(img);
    }
  });
});

# Menggunakan libavif/avifenc
avifenc --min 20 --max 50 --speed 6 --alpha-min 10 --alpha-max 40 input.png output.avif

# Menggunakan Sharp (Node.js)
await sharp(inputBuffer)
  .avif({ 
    quality: 45,
    qualityAlpha: 30, // Alpha channel bisa lebih agresif
    effort: 5,
    chromaSubsampling: '4:4:4' // Preserve detail untuk UI
  })
  .toFile('output.avif');

// Monitor decode time untuk debugging
const measureDecode = (img) => {
  const start = performance.now();
  img.decode().then(() => {
    const time = performance.now() - start;
    if (time > 50) { // Alert jika decode > 50ms
      console.warn(`Slow AVIF decode: ${time}ms for ${img.src}`);
    }
  });
};

// Estimate memory usage (rough calculation)
function estimateImageMemory(width, height, hasAlpha = false) {
  const channels = hasAlpha ? 4 : 3;
  const bytes = width * height * channels;
  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
}

/* Preload critical AVIF alpha images */
.hero-overlay {
  /* Fallback untuk non-AVIF browsers */
  background: url('hero-overlay.webp');
}

/* Progressive enhancement via CSS atau JS */
.avif .hero-overlay {
  background: url('hero-overlay.avif');
}

<!-- Comprehensive fallback -->
<picture>
  <!-- Modern: AVIF dengan alpha -->
  <source srcset="image-alpha.avif" type="image/avif">
  <!-- Fallback 1: WebP dengan alpha -->  
  <source srcset="image-alpha.webp" type="image/webp">
  <!-- Fallback 2: PNG untuk transparansi guarantee -->
  <img src="image-alpha.png" alt="" loading="lazy">
</picture>

// Dynamic format selection
async function loadBestFormat(container, basename) {
  const formats = [
    { ext: 'avif', type: 'image/avif', supported: await supportsAVIFAlpha() },
    { ext: 'webp', type: 'image/webp', supported: supportsWebP() },
    { ext: 'png', type: 'image/png', supported: true }
  ];
  
  const best = formats.find(f => f.supported);
  const img = document.createElement('img');
  img.src = `${basename}.${best.ext}`;
  img.loading = 'lazy';
  container.appendChild(img);
}

#!/bin/bash
# Generate multi-format alpha assets
for file in src/*.png; do
  base=$(basename "$file" .png)
  
  # Generate AVIF
  avifenc --min 20 --max 50 --alpha-min 15 --alpha-max 35 \
    "$file" "dist/${base}.avif"
    
  # Generate WebP
  cwebp -q 75 -alpha_q 60 -m 6 "$file" -o "dist/${base}.webp"
  
  # Optimize PNG
  oxipng -o 6 --alpha "$file" -o "dist/${base}.png"
done

// Test decode performance across formats
async function benchmarkFormats(testImages) {
  for (const {avif, webp, png} of testImages) {
    const results = await Promise.all([
      measureLoad(avif),
      measureLoad(webp), 
      measureLoad(png)
    ]);
    
    console.log(`AVIF: ${results[0].time}ms (${results[0].size}KB)`);
    console.log(`WebP: ${results[1].time}ms (${results[1].size}KB)`);
    console.log(`PNG: ${results[2].time}ms (${results[2].size}KB)`);
  }
}

// Track AVIF adoption dan performance
function trackAVIFMetrics(imageSrc, format, loadTime) {
  analytics.track('image_load', {
    format: format,
    loadTime: loadTime,
    imageSrc: imageSrc,
    supportLevel: getBrowserAVIFSupport()
  });
}

// Robust error handling untuk AVIF loading
function loadWithFallback(img, avifSrc, webpSrc, pngSrc) {
  img.onerror = () => {
    if (img.src.includes('.avif')) {
      img.src = webpSrc;
    } else if (img.src.includes('.webp')) {
      img.src = pngSrc;
    }
  };
  img.src = avifSrc;
}