Como usar srcset com descritores de largura

Com descritores de largura, srcset lista larguras intrínsecas e sizes informa o espaço aproximado de exibição.

Antes de começar

Gere variantes em larguras úteis e meça o tamanho do componente em cada breakpoint.

Passo a passo

1. Associe candidatos no srcset, descreva a largura visível em sizes e preserve uma URL src de fallback.

<img
  src="/img/projeto-640.jpg"
  srcset="/img/projeto-320.jpg 320w,
          /img/projeto-640.jpg 640w,
          /img/projeto-1280.jpg 1280w"
  sizes="(max-width: 700px) 100vw, 640px"
  width="1280" height="853"
  alt="Página do projeto exibida em um notebook">

Os números 320w, 640w e 1280w precisam ser as larguras reais dos arquivos. Se o componente ocupa 100% até 700 px e no máximo 640 px depois desse ponto, o sizes do exemplo descreve esse layout; adapte-o ao CSS real.

2. Inspecione a imagem escolhida em telas pequenas e largas e veja o recurso na aba Network.

Limites e cuidados

Mais variantes aumentam armazenamento e manutenção; use somente tamanhos que atendam ao layout. Confira Network em viewports diferentes e com cache desativado; sizes afeta a estimativa de largura CSS, enquanto o DPR e as condições do navegador também influenciam a escolha. Não misture descritores w e x no mesmo srcset. Consulte imagens responsivas.

Continue na biblioteca

Fonte oficial: Imagens responsivas — web.dev.