Guias
Tudo o que você precisa saber para servir imagens leves sem sacrificar qualidade: formatos, compressão, marcação responsiva e métricas de desempenho.
- Formatos
WebP vs AVIF vs JPEG XL: qual formato usar em 2026
Comparação prática entre WebP, AVIF e JPEG XL: compressão, qualidade, velocidade, transparência e compatibilidade. Com recomendações para cada tipo de imagem.
4 min de leituraLer guia - Desempenho
Como melhorar o LCP otimizando imagens
O Largest Contentful Paint costuma ser uma imagem. Aprenda a medi-lo, priorizá-lo com fetchpriority e preload, reduzir seu peso e evitar os erros mais comuns.
4 min de leituraLer guia - HTML
Imagens responsivas com srcset e sizes
Aprenda a usar srcset com descritores w e x, a calcular o atributo sizes corretamente e a escolher as larguras das suas variantes para não desperdiçar bytes.
3 min de leituraLer guia - HTML
O elemento picture e os formatos de fallback
Como usar <picture> para servir AVIF, WebP e JPEG XL com fallback em JPEG, fazer direção de arte por tela e evitar os erros mais comuns.
2 min de leituraLer guia - Desempenho
Lazy loading e fetchpriority em imagens
Como funcionam loading="lazy", fetchpriority e decoding="async", quais imagens devem carregar primeiro e os erros que pioram o LCP.
3 min de leituraLer guia - Fundamentos
Compressão com perdas e sem perdas, explicada
Qual a diferença entre compressão com e sem perdas, como JPEG, WebP, AVIF e PNG funcionam por dentro, e o que é a subamostragem de cor 4:2:0 versus 4:4:4.
4 min de leituraLer guia - Frameworks
Otimizar imagens no Next.js
Como configurar o next/image com AVIF e WebP, usar priority e sizes corretamente, quando pré-otimizar imagens estáticas e como evitar custos de otimização.
3 min de leituraLer guia - CMS
Otimizar imagens no WordPress
Como enviar imagens otimizadas ao WordPress, usar WebP e AVIF nativamente, aproveitar o srcset automático e evitar os erros de lazy loading na imagem destacada.
3 min de leituraLer guia - Privacidade
Metadados EXIF e privacidade em imagens
Quais informações os metadados EXIF guardam (localização GPS, câmera, data), que riscos há em publicá-los e como removê-los antes de enviar imagens para a web.
4 min de leituraLer guia - Desempenho
Checklist de imagens para Core Web Vitals
Lista de verificação de imagens para melhorar LCP, CLS e INP: formatos, dimensões, prioridade, lazy loading, width/height e ferramentas de medição.
1 min de leituraLer guia - Desempenho
Placeholders de imagem: LQIP, BlurHash, ThumbHash e cor dominante
Como mostrar algo útil enquanto as imagens carregam sem piorar o desempenho. Comparação de técnicas, implementação em HTML, Next.js e React, e erros que você deve evitar.
4 min de leituraLer guia - HTML
Guia de favicons 2026: quais tamanhos e arquivos você realmente precisa
Favicon.ico, SVG, apple-touch-icon, ícones PWA e maskable explicados. Quais arquivos criar, como vinculá-los em HTML, Next.js e WordPress e como fazer o Google mostrar seu ícone.
4 min de leituraLer guia