Gerador de Srcset e Sizes para Imagens Responsivas
Gere os atributos srcset e sizes de uma imagem responsiva (HTML), no seu navegador.
Name your files photo-320w.jpg, photo-640w.jpg, etc. Adjust “sizes” to your layout.
🔒 100 % no cliente — nenhum dado enviado
Gere os atributos srcset e sizes para suas imagens HTML responsivas e sirva a resolução certa para cada tela. A ferramenta roda 100% no seu navegador sem upload de imagem ou envio de dados. Uma forma simples de melhorar a performance e a pontuação de Core Web Vitals das suas páginas.
What is it for?
- ▸ Servir imagens ajustadas para telas mobile e Retina
- ▸ Reduzir o peso da página e melhorar o LCP
- ▸ Gerar marcação srcset para uma tag img ou picture
- ▸ Definir breakpoints de sizes consistentes com seu layout
FAQ
Para que serve o atributo srcset?
O atributo srcset fornece ao navegador várias versões de uma imagem em diferentes resoluções; ele escolhe a mais adequada com base no tamanho da tela e na densidade de pixels, evitando o download de uma imagem grande demais.
Qual é a diferença entre srcset e sizes?
srcset lista as imagens disponíveis com suas larguras, enquanto sizes informa ao navegador a largura de exibição pretendida para cada layout. Ambos são necessários para uma escolha ideal.
Devo usar srcset com a tag picture?
srcset funciona diretamente em uma tag img para troca por resolução, e dentro das tags source de um elemento picture quando você também quer trocar imagens por condição (art direction).