AVIF en Next.js & React 2026: Guía Implementación [Ejemplos]

Optimización de Imágenes Next.js

Next.js incluye un potente sistema de optimización de imágenes que soporta AVIF.

import Image from 'next/image'

export default function ProductImage() {
  return (
    <Image
      src="/product.jpg"
      alt="Producto"
      width={800}
      height={600}
      priority
    />
  )
}

Configuración AVIF

Para habilitar explícitamente AVIF en Next.js, configura next.config.js.

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

React Puro

En React sin Next.js, implementa AVIF manualmente usando el tag picture.

function OptimizedImage({ src, alt }) {
  const avifSrc = src.replace(/\.(jpg|png)$/, '.avif')
  return (
    <picture>
      <source srcSet={avifSrc} type="image/avif" />
      <img src={src} alt={alt} />
    </picture>
  )
}

Pipeline de Build

Automatiza la conversión AVIF en tu pipeline de build.

Sharp es la biblioteca Node.js más usada para conversión de imágenes.

CDNs como Cloudflare o Vercel manejan la conversión automáticamente.

Tips de Rendimiento

Mejores prácticas para maximizar el rendimiento con AVIF.

• Usa next/image: Prefiérelo siempre sobre el tag img.
• Dimensiones explícitas: Especifica siempre width/height.
• Placeholder blur: Usa placeholder='blur' para mejor UX.