Gerador de srcset e sizes

Para que serve

Servir a mesma imagem de 2000 px para um celular de 390 px e para um monitor de desktop é uma das causas mais comuns de sites lentos. A solução padrão são as imagens responsivas: gerar várias versões de cada imagem e deixar o navegador baixar a menor que fique nítida em cada tela.

Fazer isso à mão exige três passos cansativos e fáceis de errar:

1. Exportar a imagem em várias larguras e, para aproveitar os formatos modernos, em vários formatos.
2. Calcular o atributo sizes, que informa ao navegador quanto espaço a imagem ocupará na tela antes de o CSS carregar.
3. Escrever a marcação <picture> com todos os srcset, o fallback, width, height e os atributos de carregamento.

Esta ferramenta faz os três ao mesmo tempo.

Como usar o gerador

1. Solte a imagem original, a de maior resolução que você tiver. Nunca são geradas larguras maiores que o original.
2. Informe como ela é exibida na sua página:
   • Largura total: banners e capas que ocupam a janela inteira.
   • Dentro de um contêiner: o mais comum; a imagem ocupa a largura do conteúdo até um máximo (por exemplo, 1200 px).
   • Em uma grade: cards de produto ou de blog em várias colunas.
   • Largura fixa: avatares, logotipos ou miniaturas de tamanho constante.
3. Revise as larguras recomendadas. Elas são calculadas para cobrir telas de alta densidade (2x) sem gerar arquivos desnecessariamente grandes. Você pode adicionar ou remover larguras manualmente.
4. Escolha os formatos: AVIF e WebP vêm ativados, e sempre é adicionado um fallback em JPG (ou PNG se a imagem tiver transparência).
5. Clique em Gerar, baixe o ZIP e copie o código.

Como o atributo sizes é calculado

O sizes é a parte que mais costuma ser feita errado, e a que mais importa. O navegador decide qual arquivo baixar antes de conhecer o seu CSS, então precisa que você diga quanto a imagem vai medir em cada caso. Se você omitir o sizes, ele assume 100vw (a tela inteira) e no desktop baixará versões muito maiores que o necessário.

Alguns exemplos do que a ferramenta gera:

Com essa informação, o navegador multiplica a largura pela densidade de pixels da tela e escolhe o menor arquivo que a cobre. No guia de imagens responsivas com srcset e sizes explicamos isso passo a passo.

Quais larguras gerar

Mais variantes nem sempre é melhor: cada uma ocupa espaço no seu servidor e no cache da CDN. A ferramenta segue estas regras:

• Até 2x a largura máxima na tela. Telas 3x existem, mas a diferença visual entre 2x e 3x em fotos é imperceptível e o peso quase dobra.
• Saltos de 30-50% entre variantes (480, 640, 960, 1280, 1600…), o suficiente para que sempre haja um arquivo próximo do tamanho ideal.
• Nunca acima do original: ampliar não adiciona detalhe, só peso.

O código gerado

Você pode copiar três variantes:

• <picture> com um <source> por formato moderno e um <img> de fallback. É a opção recomendada: cada navegador escolhe o melhor formato que suporta e, dentro dele, a largura adequada.
• <img srcset> em um único formato (WebP), mais curto, útil se você não precisa de AVIF.
• next/image, caso você use Next.js. Nesse caso não é preciso gerar variantes, porque o framework as cria; o importante é o sizes, que a ferramenta calcula do mesmo jeito.

O código sempre inclui width e height (evitam saltos de conteúdo e melhoram o CLS) e loading="lazy". Se você marcar É a imagem principal (LCP), ele é substituído por fetchpriority="high", que faz o navegador baixá-la antes. Só deve ser usado na maior imagem visível ao carregar a página; explicamos isso no guia sobre lazy loading e fetchpriority.

Perguntas frequentes

Por que não são geradas larguras maiores que a minha imagem?

Porque ampliar uma imagem não acrescenta detalhe: só produz um arquivo maior e igualmente borrado. Se precisar de versões maiores, parta de um original de maior resolução.

Preciso de AVIF e WebP ao mesmo tempo?

Não é indispensável, mas é o ideal. O AVIF costuma ser 20-30% mais leve que o WebP, e o WebP atende os poucos navegadores que não suportam AVIF. O fallback em JPG fica para casos muito antigos.

Onde envio os arquivos?

Para qualquer pasta pública do seu site. Informe o caminho no campo Caminho público (por exemplo, /images/ ou a URL da sua CDN) e o código usará esse caminho.

Minha imagem é enviada para algum servidor?

Não. As variantes são geradas no seu navegador com os mesmos codificadores WebAssembly do resto do ImageZap.