Otimização de imagens e fontes no React
Use next/image ou carregado sob demanda, com dimensões e formatos corretos (AVIF/WebP) e font-display.
Otimização de imagens e fontes no React é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
Por que as imagens são essenciais
As imagens normalmente são os recursos maiores de uma página. Imagens não otimizadas causam LCP ruim, carregamentos lentos e custos elevados de largura de banda — especialmente em dispositivos móveis.
Componente de imagem do Next.js
next/image otimiza imagens automaticamente: carregamento adiado por padrão, srcSet responsivo, formatos modernos (WebP/AVIF) e dimensões corretas para evitar CLS.
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>Carregamento adiado no React puro
Adicione loading='lazy' aos elementos nativos <img>. O navegador adia o carregamento das imagens fora da tela até que elas se aproximem da área visível durante a rolagem.
// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />
// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />Formatos modernos de imagem
Ofereça WebP ou AVIF em vez de JPEG/PNG. O AVIF é 50% menor que o JPEG com a mesma qualidade. Utilize um elemento <picture> para negociar o formato com alternativas de compatibilidade.
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>Imagens responsivas com srcSet
Forneça vários tamanhos para que o navegador escolha a resolução adequada à tela, evitando baixar uma imagem de 2000px para uma tela móvel de 400px.
<img
src="/photo-800.jpg"
srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Photo"
/>Placeholders Blurhash / skeleton
Mostre um placeholder desfocado enquanto a imagem é carregada para evitar deslocamentos de layout e melhorar o desempenho percebido.
// With next/image blur placeholder:
<Image
src="/photo.jpg"
alt="Photo"
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>Estratégia de carregamento de fontes
As fontes bloqueiam a renderização. Utilize font-display: swap para exibir uma fonte alternativa enquanto a fonte personalizada é carregada, reduzindo o FOIT (Flash de texto invisível).
/* In global CSS: */
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2');
font-display: swap; /* show fallback, swap to MyFont when ready */
}Otimização de fontes no Next.js
next/font carrega as fontes do Google durante a compilação, hospeda-as localmente e aplica font-display: optional para eliminar CLS causado pela troca de fontes.
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return <html className={inter.variable}><body>{children}</body></html>;
}Redução de subconjuntos de fontes
Carregue apenas os subconjuntos de caracteres necessários. Uma fonte Unicode completa pode ter mais de 1 MB; um subconjunto latino normalmente tem de 30 a 80 KB.
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });Pré-carregamento de fontes críticas
Pré-carregue as fontes utilizadas acima da dobra para que sejam carregadas em paralelo à análise do HTML, reduzindo o tempo de bloqueio da renderização.
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>CDN e armazenamento em cache
Sirva imagens e fontes de uma CDN com TTLs longos de cache (Cache-Control: max-age=31536000, immutable). Nomes de arquivo com hash do conteúdo garantem que arquivos novos ignorem o cache.
Verificação rápida
O que font-display: swap faz com as fontes da Web?
Recapitulação
Utilize next/image para obter otimização automática ou loading='lazy' + srcSet nativos no React puro. Sirva AVIF/WebP com alternativas em <picture>. Aplique font-display: swap às fontes da Web, utilize next/font para hospedar localmente as fontes do Google e pré-carregue os recursos críticos acima da dobra.
Perguntas Frequentes
A aula “Otimização de imagens e fontes no React” é grátis?
Sim — o texto completo de “Otimização de imagens e fontes no React” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Otimização de imagens e fontes no React”?
Use next/image ou carregado sob demanda, com dimensões e formatos corretos (AVIF/WebP) e font-display. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Otimização de imagens e fontes no React”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Medindo os Core Web Vitals em aplicativos React
- Análise do pacote e estratégia de divisão de código
- Otimização de imagens e fontes no React
- Reduzindo o INP: otimização de manipuladores de eventos