Gerador de srcset

Gerador de srcset: HTML de imagem responsiva com sizes | We.Inc

Gerador de srcset grátis. Informe o nome da imagem, as larguras que você exportou e a largura em que ela aparece para gerar HTML img responsivo com srcset, sizes, width e height.

Gerador de srcset

Informe o nome base da imagem, as larguras em que você a exportou e a largura em que ela aparece na página, e receba uma tag img completa com srcset, sizes, width, height e carregamento lento. Assim celulares baixam um arquivo pequeno e telas grandes um nítido, uma das formas mais simples de fazer uma página cheia de imagens carregar mais rápido.

Exporte a imagem em várias larguras e nomeie os arquivos com a largura no fim, como hero-480.webp, hero-800.webp e hero-1200.webp.
Digite o nome base (hero, ou um caminho como images/hero), escolha o formato e liste as larguras. Ordem e duplicados não importam.
Descreva a largura de exibição no campo sizes, por exemplo '(max-width: 768px) 100vw, 50vw' para uma imagem que ocupa o celular inteiro e metade das telas maiores.
Defina a proporção para que width e height sejam escritos na tag e copie o HTML para a sua página.

De três a cinco larguras costumam bastar. Cada largura extra é mais um arquivo para exportar e guardar, com economia cada vez menor.
Inclua uma largura de cerca do dobro do maior tamanho de exibição para imagens nítidas em telas de alta densidade. Uma imagem exibida com 600 pixels de largura precisa de um arquivo de 1200 pixels para essas telas.
Deixe o carregamento lento desligado na imagem principal do topo da página. Ela deve começar a baixar na hora; o carregamento lento serve para imagens mais abaixo.
Se o sizes estiver errado, o navegador escolhe o arquivo errado. Meça a largura real em que a imagem aparece em algumas larguras de tela antes de escrevê-lo.

Perguntas frequentes

O que fazem srcset e sizes?

O srcset lista os arquivos com a largura real, escrita como 'arquivo 800w'. O sizes diz ao navegador com que largura a imagem será exibida. O navegador multiplica a largura de exibição pela densidade de pixels da tela e baixa o menor arquivo que tenha pelo menos essa largura. Com sizes='50vw' em uma tela de 1000 pixels de largura com densidade 2x, ele precisa de 1000 pixels e escolhe o arquivo 1200w se o próximo menor for 800w.

Por que adicionar width e height?

Eles deixam o navegador reservar o espaço certo antes de a imagem chegar, para o texto abaixo não pular quando ela carrega. A ferramenta escreve a maior largura e a altura que combina com a proporção; um CSS como max-width: 100%; height: auto; continua fazendo a imagem diminuir para caber.

Qual arquivo é usado como src?

O de maior largura. Navegadores que entendem srcset ignoram o src na escolha, e o raro navegador que não entende vai mostrar uma imagem nítida em vez de uma borrada.

Que valor de sizes uso para uma imagem de largura total?

Use 100vw. Para uma imagem dentro de uma coluna de conteúdo que para em 800 pixels, use '(max-width: 800px) 100vw, 800px', que significa: em telas de até 800 pixels de largura a imagem ocupa a tela toda; nas outras, tem 800 pixels.

A ferramenta redimensiona minhas imagens?

Não. Ela escreve o HTML para arquivos que você já exportou. Use um compressor de imagens ou sua ferramenta de design para exportar cada largura.

Descritores de largura e descritores de densidade

O srcset aceita dois tipos de descrição. Descritores de largura (480w, 800w) informam a largura real em pixels de cada arquivo e funcionam junto com o sizes, o que combina com imagens que mudam de tamanho com o layout. Descritores de densidade (1x, 2x) dizem qual arquivo usar em telas comuns e de alta densidade e combinam com imagens de tamanho fixo, como um logotipo.
Não é permitido misturar os dois no mesmo srcset, e usar descritores de largura sem sizes faz o navegador supor que a imagem ocupa a largura inteira da tela. Esse segundo erro é comum e envia arquivos grandes para todos os visitantes sem ninguém perceber, então sempre combine descritores w com um valor de sizes honesto.

Como conferir se o arquivo certo carrega

Abra a página em um navegador de computador, abra as ferramentas de desenvolvedor e veja a lista de rede das imagens; depois estreite a janela e recarregue. Em larguras estreitas, um arquivo menor deve carregar. Alguns navegadores ficam com um arquivo maior que já baixaram em vez de buscar um menor, então teste em uma janela anônima ou com o cache desativado.
Se o maior arquivo sempre carrega, confira primeiro o sizes: um valor ausente ou grande demais é a causa mais comum. Depois verifique se os números do srcset batem com a largura real dos arquivos; um arquivo chamado hero-800 que na verdade tem 1600 pixels de largura continua sendo baixado com 1600.

Nome base ou caminho da imagem

images/hero

Os arquivos devem seguir o formato <nome>-<largura>.<formato>.

Formato

WebP

AVIF

JPG

PNG

Larguras exportadas (pixels)

Sizes

(max-width: 768px) 100vw, 50vw

Texto alternativo

Balcão de padaria com pão fresco

Proporção: largura

Proporção: altura

Carregamento lento (não para a primeira imagem da página)

Informe pelo menos uma largura em pixels, separadas por vírgulas, como 480, 800, 1200.

Gerador de srcset