AVIF em Next.js & React 2026: Guia Implementação [Exemplos]

AVIF no Ecossistema React

React e Next.js oferecem excelentes opções para otimização AVIF.

Next.js inclui componente Image com otimização automática incluindo AVIF.

Para React vanilla, várias abordagens permitem integrar AVIF eficientemente.

Next.js Image Optimization

O componente next/image lida com AVIF automaticamente.

Next.js detecta automaticamente suporte e serve AVIF, WebP ou original.

import Image from 'next/image'

export default function Home() {
  return (
    <Image
      src="/product.jpg"
      alt="Produto"
      width={800}
      height={600}
      // AVIF é servido automaticamente!
    />
  )
}

Configuração Avançada

Personalize o comportamento de next/image.

• formats: Ordem de preferência dos formatos.
• deviceSizes: Breakpoints para imagens responsivas.
• minimumCacheTTL: Duração de cache para imagens otimizadas.

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200],
    minimumCacheTTL: 60 * 60 * 24 * 365,
  },
}

Implementação React Vanilla

Para projetos React sem Next.js.

Este componente reutilizável serve automaticamente o melhor formato.

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

Pipeline de Build

Automatize geração de imagens no build.

// scripts/optimize-images.js
const sharp = require('sharp');
const glob = require('glob');

glob('public/images/**/*.{jpg,png}', async (err, files) => {
  for (const file of files) {
    await sharp(file).avif({ quality: 80 }).toFile(file.replace(/\.(jpg|png)$/, '.avif'));
    await sharp(file).webp({ quality: 85 }).toFile(file.replace(/\.(jpg|png)$/, '.webp'));
  }
});

Dicas de Performance

Otimize ainda mais suas imagens React.

• Priority Loading: Use priority={true} para imagens above-the-fold.
• Placeholder: blur placeholder para melhor UX.
• Lazy Loading: Padrão em next/image.
• Sizing: Sempre especifique width/height para evitar CLS.

<Image
  src="/hero.jpg"
  priority
  placeholder="blur"
/>