Gerador de Srcset (Imagens responsivas)

Gera HTML srcset/sizes a partir de uma lista de larguras sem prejudicar LCP/CLS.

srcset

Visão geral

Gere vários tamanhos e o HTML srcset/sizes correspondente para adotar imagens responsivas.

Como usar

  1. Carregar imagem de origem.
  2. Listar larguras necessárias.
  3. Copiar o HTML gerado.

Casos de uso

  • Otimizar imagens de artigos.
  • Fornecer múltiplas resoluções para imagens hero.
  • Reduzir transferência para galerias/cartões.

Dicas e conhecimento

  • Fazer sizes corresponder ao layout real.
  • Escolher qualidade adequada por largura.
  • Combinar com loading="lazy" para melhor LCP.