Otimização de imagens: carregamento tardio e formatos WebP
Adicione loading=lazy às imagens, forneça os formatos modernos WebP e AVIF, use imagens responsivas com srcset e sizes e defina largura e altura explícitas para evitar mudanças no layout.
Otimização de imagens: carregamento tardio e formatos WebP é uma aula grátis de Frontend 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Imagens dominam o peso da página
A página da Web mediana tem cerca de 2 MB, e as imagens respondem por aproximadamente metade desse tamanho. Otimizar imagens é a tarefa de desempenho de maior impacto.
Formatos modernos: WebP e AVIF
WebP é 25% a 35% menor que JPEG com qualidade semelhante e é compatível com todos os navegadores modernos. AVIF é ainda menor (redução de 50%), mas é mais lento para codificar. Use ambos com uma alternativa.
O elemento picture
Use <picture> para fornecer AVIF quando houver suporte, depois WebP e, por fim, JPEG como alternativa final.
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>Carregamento lento nativo
Adicione loading="lazy" às imagens abaixo da área visível inicial. O navegador adia o carregamento até que a imagem se aproxime da área de visualização, sem necessidade de JavaScript.
<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">
<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">Imagens responsivas com srcset e sizes
Forneça imagens menores para telas menores. srcset lista imagens candidatas com suas larguras; sizes informa ao navegador a largura de exibição da imagem em cada ponto de interrupção.
<img
src="/photo-800.jpg"
srcset="/photo-400.jpg 400w,
/photo-800.jpg 800w,
/photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="" width="800" height="600">Por que definir width e height explicitamente
O navegador reserva espaço com base nos atributos width/height, evitando uma mudança de layout quando a imagem chega. Os navegadores modernos calculam automaticamente a proporção de aspecto a partir desses atributos.
decoding="async"
Adicione decoding="async" para permitir que o navegador decodifique a imagem fora da linha de execução principal, liberando-a para renderizar outro conteúdo.
<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">CDNs de imagens
CDNs de imagens (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) transformam imagens automaticamente: redimensionam, convertem para WebP/AVIF, comprimem e fornecem o conteúdo a partir de caches de borda.
<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">Componente de imagem do Next.js
O <Image> do Next.js gerencia srcset responsivo, conversão para WebP, carregamento lento e espaço reservado com desfoque desde o início.
import Image from 'next/image';
<Image
src="/photo.jpg"
alt="Description"
width={800}
height={600}
placeholder="blur"
priority={isHero}
/>Comprimindo JPEGs e PNGs
Se não puder mudar para WebP, pelo menos comprima as imagens: use o Squoosh (squoosh.app) para imagens avulsas, o ImageOptim para processamento em lote ou o sharp em um script de compilação.
SVGs para ícones e logotipos
Use SVG para ícones, logotipos e qualquer arte vetorial. SVGs são perfeitamente escaláveis, têm tamanho reduzido e podem ser estilizados com CSS. Insira SVGs pequenos diretamente na página para evitar uma solicitação HTTP adicional.
Verificação rápida
Qual atributo HTML instrui o navegador a adiar o carregamento de uma imagem até que ela se aproxime da área de visualização?
Recapitulação: otimização de imagens
Use formatos modernos (AVIF, WebP) por meio do elemento picture. Adicione loading="lazy" abaixo da área visível inicial e fetchpriority="high" na imagem principal. Defina width/height explicitamente para evitar CLS. Use srcset/sizes para imagens responsivas. As CDNs de imagens automatizam a transformação. O componente Image do Next.js cuida de tudo. Use SVG para ícones.
Perguntas Frequentes
A aula “Otimização de imagens: carregamento tardio e formatos WebP” é grátis?
Sim — o texto completo de “Otimização de imagens: carregamento tardio e formatos WebP” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Otimização de imagens: carregamento tardio e formatos WebP”?
Adicione loading=lazy às imagens, forneça os formatos modernos WebP e AVIF, use imagens responsivas com srcset e sizes e defina largura e altura explícitas para evitar mudanças no layout. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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: carregamento tardio e formatos WebP”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Principais métricas da Web: LCP FID CLS
- Auditorias e pontuação do Lighthouse
- Otimização de imagens: carregamento tardio e formatos WebP
- Divisão de código e rotas sob demanda