Gerador de imagens responsivas (srcset e sizes)

Gerador de imagens responsivas (srcset e sizes): para que serve

Imagens responsivas fazem o celular baixar uma foto pequena e a tela grande uma maior, o que deixa o site mais rápido sem perder nitidez. Para isso são precisos vários tamanhos da mesma foto e o código com srcset e sizes.

Envie a imagem, escolha as larguras, o formato e a qualidade e baixe todas as versões num .zip. O código sai pronto com srcset, sizes de acordo com o lugar da imagem na página, width e height para não pular o layout, loading=lazy ou fetchpriority=high (com preload) para a imagem principal, e opcionalmente <picture> com JPG de reserva. Tudo é feito no seu aparelho.

Como usar

1. Escolha a imagem.
2. Defina larguras, formato e onde ela aparece.
3. Baixe o .zip e copie o código.

Quando usar

• Fotos de produtos em lojas.
• Imagem principal de landing pages.
• Galerias e blogs.

Perguntas frequentes

O que fazem srcset e sizes?

O srcset lista as versões da mesma imagem com a largura de cada uma (por exemplo 640w, 1280w). O sizes diz quanto espaço a imagem ocupa na tela. Com os dois, o navegador escolhe a menor versão que fica nítida naquela tela, e o celular não baixa a foto de 2000 px.

Por que width e height na tag?

Com width e height, o navegador reserva o espaço da imagem antes de ela carregar e o texto não pula para baixo quando a foto aparece. Isso melhora o CLS, uma das métricas do Core Web Vitals do Google.

Quando usar loading=lazy?

Em imagens que ficam mais abaixo na página. A imagem principal, visível logo ao abrir, nunca deve ter lazy: ela leva fetchpriority=high para carregar o quanto antes.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas