Imagens responsivas: compreender srcset e sizes

Uma imagem pode adaptar-se perfeitamente à largura do ecrã e continuar desnecessariamente pesada. É um dos problemas mais frequentes do responsive design.

Com CSS como:

img { max-width: 100%; height: auto; }

uma fotografia de 4.000 píxeis pode ser apresentada corretamente numa coluna de 360 px. Mas, se o navegador descarregar sempre o ficheiro de 4.000 px, o utilizador móvel recebe muito mais dados do que precisa.

As imagens responsivas resolvem este problema ao fornecer vários recursos possíveis e permitir ao navegador escolher uma variante adequada.

Imagem fluida e imagem responsiva

Uma imagem fluida adapta a sua apresentação ao contentor com CSS. O ficheiro descarregado pode, no entanto, permanecer exatamente o mesmo.

Uma imagem responsiva oferece vários ficheiros, por exemplo:

foto-480.webp
foto-800.webp
foto-1200.webp
foto-1600.webp

O CSS adapta a apresentação; srcset e sizes adaptam o recurso transferido.

Porque não enviar sempre a maior imagem?

Porque um recurso grande tem um custo. Se uma variante de 800 px pesa 110 kB e uma de 2.000 px pesa 420 kB, enviar sempre a segunda para um telemóvel pode desperdiçar centenas de kilobytes por imagem.

Em galerias, catálogos ou páginas com muitas imagens, esse desperdício acumula-se rapidamente.

E porque não usar sempre a mais pequena?

Uma imagem de 480 px pode perder nitidez num ecrã grande ou de alta densidade. É necessário equilibrar dimensões, densidade, peso e qualidade. As imagens responsivas permitem oferecer várias respostas em vez de impor um tamanho universal.

Preparar as variantes

O HTML não cria os ficheiros automaticamente. A partir de um original suficientemente grande pode preparar:

hero-480.webp
hero-768.webp
hero-1024.webp
hero-1440.webp
hero-1920.webp

O redimensionador de imagens ajuda a gerar larguras e o conversor permite mudar formato e compressão.

Não é necessário criar uma variante para cada largura possível; escolha um conjunto razoável de patamares coerentes com o layout.

Como funciona srcset com w

<img
  src="foto-800.webp"
  srcset="foto-480.webp 480w, foto-800.webp 800w, foto-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Descrição">

480w descreve a largura intrínseca do ficheiro, não a largura CSS final. sizes indica uma estimativa do espaço que a imagem ocupará no layout. O navegador combina estas informações com viewport e densidade do dispositivo para escolher uma candidata.

O descritor de densidade x

Para elementos com uma dimensão CSS relativamente fixa, pode usar:

<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" alt="Logótipo">

Não misture descritores w e x no mesmo srcset sem compreender o modelo de seleção. Para imagens de conteúdo cuja largura muda com o layout, w com sizes é normalmente mais adequado.

O que faz realmente sizes?

sizes não define a largura CSS. Ajuda o navegador a estimar antecipadamente o espaço ocupado pela imagem. O CSS continua responsável pelo tamanho final.

Se sizes indicar 100vw quando a imagem ocupa apenas metade do viewport, o navegador pode escolher um ficheiro maior do que o necessário. A configuração deve, portanto, refletir o layout real.

Quando usar picture?

<picture> é útil para art direction ou para oferecer formatos diferentes:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Descrição">
</picture>

Também pode ser usado quando o enquadramento muda em mobile, e não apenas a dimensão do ficheiro.

Responsive não substitui compressão

Uma imagem de 800 px pode continuar pesada se o formato ou a qualidade forem inadequados. Uma estratégia completa combina dimensões corretas, variantes úteis, formato adequado, compressão controlada, srcset/sizes coerentes e verificação no navegador.

Erros frequentes

Fornecer ficheiros de dimensão idêntica no srcset. Não há escolha útil.

Declarar larguras erradas. Os valores w devem corresponder às dimensões reais.

Escrever sizes sem olhar para o CSS. O navegador pode descarregar uma variante sobredimensionada.

Omitir width e height. Declarar dimensões ajuda a reservar espaço e reduzir mudanças de layout.

Como verificar

Utilize as ferramentas de desenvolvimento do navegador, altere a largura do viewport e observe que recurso é efetivamente descarregado. Teste também densidades de ecrã diferentes quando possível.

A pergunta correta não é apenas «a imagem está nítida?», mas também «o navegador descarregou um recurso proporcional ao tamanho efetivo?».

A reter

Uma imagem responsiva não é apenas uma imagem que encolhe com CSS. É uma estratégia que permite ao navegador escolher o recurso mais adequado ao contexto, evitando tanto ficheiros excessivamente grandes como imagens demasiado pequenas e desfocadas.