Imagens responsivas com srcset: o que são e como gerar as versões

Resposta rápidaimagens responsivas com srcset são várias versões da mesma foto, em larguras diferentes, listadas no atributo srcset da tag img. Com o atributo sizes, o navegador escolhe sozinho a versão certa para cada tela. Para uma loja, gerar de 4 a 6 larguras (por exemplo, 320, 640, 960, 1280 e 1920 px) por foto costuma bastar.

Uma foto de produto exportada com 2000 px de largura fica linda no monitor de 27 polegadas. No celular, onde ocupa uns 400 px de tela, ela pesa o mesmo — e o cliente baixa pixels que nunca vai ver. Multiplique por 30 produtos na vitrine e a página trava no 4G.

Imagens responsivas com srcset resolvem isso sem trocar de foto: você oferece várias larguras e o navegador escolhe. O que costuma travar não é o HTML, e sim gerar as versões de centenas de fotos. Este guia cobre as duas partes.

Por que uma imagem só não serve para todas as telas

A vitrine de uma loja é exibida em telas de 360 px a 2560 px de largura, com densidades de pixel diferentes. Um celular comum tem densidade 2 ou 3: cada "pixel de CSS" usa dois ou três pixels físicos por lado. Por isso, uma foto que ocupa 400 px de layout num celular de densidade 2 precisa de cerca de 800 px reais para ficar nítida — e não de 2000.

Segundo o web.dev, um bom Largest Contentful Paint fica em até 2,5 segundos. Na página de produto, o maior elemento costuma ser justamente a foto principal. Mandar a versão errada é o jeito mais fácil de estourar essa meta.

O efeito na prática:

Tela	Largura da foto no layout	Densidade	Arquivo ideal
Celular	cerca de 360 px	2x a 3x	720 a 1080 px
Tablet	cerca de 500 px	2x	960 a 1080 px
Notebook	cerca de 600 px	1x a 2x	640 a 1280 px
Monitor grande com zoom	900 px ou mais	1x a 2x	1280 a 1920 px

Sem srcset, todas essas telas recebem o mesmo arquivo, quase sempre o maior.

Como funcionam srcset e sizes

O srcset lista os arquivos e a largura real de cada um, com o descritor w. O sizes informa quanto espaço a imagem ocupa no layout. O navegador cruza as duas informações com a tela do aparelho e baixa só o arquivo necessário.

“html <img src="tenis-960w.webp" srcset="tenis-320w.webp 320w, tenis-640w.webp 640w, tenis-960w.webp 960w, tenis-1280w.webp 1280w" sizes="(max-width: 600px) 100vw, 50vw" width="1280" height="1280" alt="Tênis de corrida azul"> “

Lendo o exemplo: em telas de até 600 px, a foto ocupa a largura toda (100vw); acima disso, metade (50vw). O src é a alternativa para navegadores muito antigos. A referência completa está na documentação da tag img no MDN.

Três detalhes que fazem diferença

• Declare width e height. Eles reservam o espaço da foto e evitam que a página "pule" quando ela carrega.
• Não use loading="lazy" na foto principal. Ela precisa carregar logo; o lazy é para as imagens abaixo da dobra.
• Mantenha a mesma proporção em todas as versões. O srcset troca a resolução, não o enquadramento. Para cortes diferentes por tela, o recurso é o elemento picture.

Quantas larguras gerar

Mais versões não significa mais ganho. Entre uma largura e a próxima, o navegador sempre arredonda para cima, então saltos de 300 a 400 px já entregam quase todo o benefício. Uma sequência que funciona para a maioria das lojas é 320, 640, 960, 1280 e 1920 px. Se a sua foto ampliada não passa de 1200 px, pare em 1280.

Como gerar as versões do srcset passo a passo

O HTML é a parte fácil. A parte que ninguém faz é exportar cinco versões de cada foto. Este roteiro organiza o trabalho:

1. Descubra a maior largura exibida da foto no seu tema, zoom incluído, usando o inspetor do navegador.
2. Defina as larguras a partir dela, por exemplo 320, 640, 960 e 1280 px.
3. Escolha o formato: WebP é seguro para vitrine; veja o comparativo em WebP, JPG, PNG ou AVIF.
4. Gere todas as versões de cada foto com o mesmo padrão de qualidade (75 a 85 costuma funcionar).
5. Nomeie com a largura no final, como tenis-640w.webp. Assim, montar o srcset vira copiar e colar.
6. Não amplie fotos pequenas: se o original tem 800 px, não gere 1280 px.
7. Teste no celular com a aba de rede do navegador aberta e confira qual arquivo foi baixado.

Placeholder enquanto a foto carrega

Mesmo com a versão certa, a foto leva alguns instantes no 4G. Um placeholder de baixa qualidade (LQIP) — uma miniatura de cerca de 20 px, borrada e embutida na página em base64 — mostra a silhueta da imagem enquanto a versão real chega. Pesa poucas centenas de bytes e dá a sensação de página mais rápida.

Onde o srcset não chega

O srcset melhora o que o navegador baixa. Ele não corrige foto sem compressão, formato errado ou miniatura carregando o original. Para a vitrine, combine com comprimir imagens para loja virtual e, nas galerias, com miniaturas de verdade.

Plataforma, plugin ou geração própria?

Nem toda loja precisa gerar as versões na mão. Veja onde cada caminho se encaixa:

Situação	O que costuma acontecer	O que fazer
Plataforma de loja pronta	Gera tamanhos sozinha na entrega	Subir a foto já na medida e no peso certos
WordPress / WooCommerce	Cria tamanhos ao subir e usa srcset no tema	Conferir se o tema usa sizes correto
Tema próprio ou headless	Nada é gerado	Gerar as versões e montar o HTML
Landing page e blog fora da loja	Foto única pesada	Gerar as versões em lote

Dica rápida para conferir: clique com o botão direito na foto, escolha "Inspecionar" e veja se a tag img tem srcset. Se não tiver, cada visitante está baixando a mesma foto.

Checklist antes de publicar

Antes de subir uma coleção nova, passe por este checklist de imagens responsivas srcset. Leva cinco minutos e evita a maior parte dos erros que aparecem depois no PageSpeed:

• Todas as versões têm a mesma proporção do original.
• Nenhuma largura foi ampliada além do arquivo de origem.
• Os nomes terminam com a largura (-320w, -640w…), sem exceção.
• O sizes corresponde ao layout real, e não ao padrão 100vw em toda tela.
• A foto principal não usa loading="lazy"; as da vitrine abaixo da dobra usam.
• width e height estão declarados em cada img.

Quem cuida de catálogo com várias pessoas ganha muito ao transformar esse checklist em regra de equipe: a configuração de imagens responsivas srcset vira parte do cadastro de produto, e não um ajuste que alguém lembra de fazer meses depois.

Perguntas frequentes

Como automatizar isso com a Pasta Mágica

A Pasta Mágica gera as larguras com bibliotecas de imagem tradicionais, sem IA alterando a foto do produto. O fluxo para uma loja fica assim:

1. Crie sua conta em pastamagica.com.br/cadastrar e use a cota grátis para testar com fotos reais.
2. Escolha Conjunto responsivo (srcset) no app. Para ter também o LQIP, monte um pipeline com Placeholder de carregamento (LQIP) como etapa seguinte.
3. Ajuste as opções: larguras (o padrão é 320, 640, 960, 1280 e 1920 px), formato (WebP, AVIF, JPEG ou manter o original) e qualidade. A opção de não ampliar vem ligada.
4. Solte as fotos. Cada arquivo é conferido pelo conteúdo, não pela extensão, e cada versão sai nomeada como foto-640w.webp.
5. Acompanhe arquivo por arquivo e baixe tudo num ZIP, pronto para subir no servidor.

O custo de cada automação é fixo em créditos e aparece antes de rodar. Se uma foto falhar, os créditos dela voltam sozinhos. Os limites de cada plano estão na tabela de preços.