Como as URLs do srcset são nomeadas?

Cada largura acrescenta um sufixo - w antes da extensão do arquivo, ex.: photo-640w.jpg.

Para que serve o atributo sizes?

Ele informa ao navegador quanto espaço a imagem ocupa para que ele possa escolher a fonte certa.

Gerador de Srcset

Construa uma tag img responsiva com srcset e sizes.

URL da imagem baseLarguras (px)Atributo sizesTexto alternativo

Saída

<img
  src="/images/photo-1024w.jpg"
  srcset="
    /images/photo-320w.jpg 320w,
    /images/photo-640w.jpg 640w,
    /images/photo-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 640px"
  alt=""
/>

Digite uma URL de imagem base e larguras-alvo para gerar uma tag <img> responsiva com os atributos srcset e sizes.

Como usar

Digite a URL da imagem base.
Liste as larguras que você quer, separadas por vírgulas.
Copie a tag img responsiva gerada.

Perguntas frequentes

Como as URLs do srcset são nomeadas?: Cada largura acrescenta um sufixo -<largura>w antes da extensão do arquivo, ex.: photo-640w.jpg.
Para que serve o atributo sizes?: Ele informa ao navegador quanto espaço a imagem ocupa para que ele possa escolher a fonte certa.

Ferramentas relacionadas

Gerador de Meta Tags
Pré-visualização do Open Graph
Gerador de Meta Viewport