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.
<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.
