Gerador de srcset

Gere srcset, sizes e markup picture em um único lugar

Escrever markup de imagens responsivas na mão é trabalhoso — a lista srcset, o atributo sizes correspondente, o bloco <picture> com fallbacks WebP e AVIF — e um único erro de digitação faz o navegador baixar silenciosamente o arquivo errado. Este gerador de srcset constrói a tag completa pra você: insira um nome de arquivo e suas larguras e ele produz um elemento <img> ou <picture> responsivo completo e pronto pra copiar, com descritores corretos, carregamento lazy e decodificação assíncrona.

É um gerador de imagens responsivas gratuito que roda totalmente no navegador — sem cadastro, nada é enviado, e continua funcionando offline depois de carregado.

srcset e sizes, explicados

Uma imagem responsiva precisa de duas partes trabalhando juntas. srcset é a lista de arquivos e suas larguras reais — hero-640.jpg 640w diz ao navegador que aquele arquivo tem 640 pixels de largura. sizes descreve o quanto a imagem vai ocupar no seu layout, por exemplo (max-width: 600px) 100vw, 600px. O navegador lê sizes, multiplica pela relação de pixels do dispositivo, e baixa o candidato srcset mais próximo.

Mude o descritor para x e você terá markup de densidade de pixels — logo.png 1x, logo@2x.png 2x — ideal pra imagens de tamanho fixo como logos e ícones em telas retina, onde descritores w e sizes seriam desnecessários.

Quando usar o elemento picture

O srcset simples cuida da troca de resolução — a mesma imagem em tamanhos diferentes. Use o elemento <picture> quando precisar de mais controle: servir formatos modernos com fallback, ou direção de arte (um recorte diferente no mobile e no desktop).

No modo <picture>, essa ferramenta emite um <source type="image/avif">, um <source type="image/webp"> e um fallback <img> JPEG ou PNG, para que navegadores modernos recebam o formato menor e os mais antigos ainda vejam a imagem.

Redimensione sua imagem para cada largura, localmente

O markup é só metade do trabalho — você ainda precisa dos arquivos redimensionados. Arraste uma imagem pra ferramenta e ela vai redimensioná-la pra cada uma das suas larguras direto numa canvas HTML, deixando você baixar o conjunto completo com nomes de arquivo que correspondem exatamente ao markup gerado (hero-320.jpg, hero-640.jpg, etc.).

Sem upload, sem pipeline de build. Como ampliar além do original só adiciona borrão, a ferramenta avisa sobre qualquer largura maior que a fonte pra manter o conjunto de imagens preciso.

Como se compara ao Squoosh, Responsivebreakpoints.com e Cloudflare Image Resize

Squoosh (do Google) é ótimo pra compressão e conversão de imagens individuais — excelente pra escolher a qualidade certa de um WebP ou AVIF. Mas não gera markup srcset nem produz uma tag de imagem responsiva completa pra colar no HTML. É uma ferramenta de compressão, não um gerador de markup.

Responsivebreakpoints.com da Cloudinary envia sua imagem pros servidores da Cloudinary pra calcular breakpoints ideais e gerar imagens redimensionadas. Os resultados são bons, mas seu arquivo sai do seu computador e os termos da Cloudinary se aplicam. Cloudflare Image Resize e Imgix são serviços CDN — processam imagens na entrega mas exigem configuração de conta, integração de API e cobrança contínua. O gerador de srcset da UtiloKit fica numa posição diferente: gera markup HTML completo e redimensiona imagens localmente, no lado do cliente, sem upload, sem conta, sem custo e sem limites de tamanho de arquivo.

Larguras, breakpoints e Core Web Vitals

Um conjunto de larguras confiável é 320, 640, 960, 1280 e 1920, aproximadamente dobrando a cada passo pra cobrir celulares até telas retina grandes; adicione 2560 pra heroes em tela cheia. Servir uma imagem do tamanho certo é um dos maiores ganhos pra Core Web Vitals: menos bytes significa um Largest Contentful Paint mais rápido, e adicionar atributos width e height evita o deslocamento de layout (CLS) que prejudica usuários e rankings.

Adicione loading="lazy" a imagens fora da tela pra que carreguem só quando aparecerem na tela, e fetchpriority="high" no seu hero pra ele carregar primeiro — ambos são toggles de um clique aqui.

Privado, instantâneo e offline — funciona em qualquer dispositivo

Não tem nada pra instalar nem conta pra criar. Cada tag é montada no seu navegador enquanto você digita, e qualquer imagem que você redimensionar é processada localmente com a API canvas — nada é enviado. O gerador funciona offline depois de carregada a página, pra você criar markup img srcset e <picture> responsivo em qualquer lugar — num avião, no celular, sem Wi-Fi.