Imagens responsivas, srcset e fluxo WebP
Gere assets em várias larguras localmente, entenda srcset e sizes e copie snippets picture ou Next.js sem enviar a origem.
Imagens hero, capas de blog e capturas de documentação costumam ir em uma única resolução grande. Navegadores ainda precisam de variantes menores para telefones, tablets e layouts estreitos. Você pode gerar essas variantes localmente e copiar markup que corresponde aos arquivos exportados.
Quando srcset ajuda
srcset informa ao navegador quais arquivos existem em cada largura. Combine com sizes para que o navegador escolha um arquivo razoável antes da pintura.
Para muitos sites estáticos e bibliotecas de componentes, o fluxo é:
- Exportar várias larguras de uma imagem de origem.
- Publicar os arquivos ao lado da página ou em
public/. - Colar um bloco
<img srcset>ou<picture>com os nomes exatos.
Fluxo prático local
- Prepare uma imagem de origem (por exemplo um hero JPEG 1920×1080).
- Abra o Gerador de imagens responsivas.
- Mantenha as larguras padrão (480, 768, 1024, 1280) ou ajuste para seu layout.
- Escolha WebP quando o host servir formatos modernos, ou JPEG para máxima compatibilidade.
- Clique em Gerar imagens, revise tamanhos e baixe o zip.
- Copie o snippet
srcset,<picture>ou Next.js<Image>e atualizesizes/alt.
O processamento fica na sua máquina.
Padrão WebP + fallback
Com WebP, o snippet <picture> inclui <source> WebP e <img> de fallback. Se o pipeline ainda precisar de JPEG ou PNG, mude o formato antes de gerar e use o snippet <img srcset>.
Para economia extra em arquivos individuais, passe saídas pelo Compressor de imagem só se ainda precisar de bytes menores após a escolha de largura.
Ferramentas relacionadas
- Recortador de imagem — ajuste proporção antes de gerar larguras.
- Compressor de imagem — reduza bytes além da seleção de largura.
- Pré-visualização Markdown — visualize docs com imagens responsivas.