Imagens Responsivas: srcset, sizes e Art Direction

Por que imagens responsivas importam

Diferentes dispositivos (mobile, tablet, desktop) têm diferentes tamanhos de tela e resoluções. Um único tamanho de imagem não é ótimo para todos os dispositivos.

Imagens grandes desperdiçam largura de banda no mobile. Imagens pequenas parecem pixeladas no desktop. Imagens responsivas servem o tamanho correto para cada dispositivo.

Core Web Vitals: Imagens responsivas melhoram as métricas LCP (Largest Contentful Paint) e CLS (Cumulative Layout Shift).

Atributo srcset

srcset fornece ao navegador opções de imagem em diferentes resoluções. O navegador seleciona a imagem mais apropriada com base no DPR (Device Pixel Ratio) e no tamanho do viewport do dispositivo.

Descritor de largura: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="...">. A unidade w especifica a largura natural da imagem.

Descritor de densidade: <img srcset="image.jpg 1x, image@2x.jpg 2x" src="image.jpg" alt="...">. A unidade x especifica a densidade de pixels do dispositivo.

Seleção do navegador: O navegador seleciona a imagem mais apropriada com base no tamanho do viewport, DPR e condições de rede. Esta seleção é automática e otimizada.

Atributo sizes

sizes especifica o tamanho que a imagem ocupará no viewport. O navegador usa sizes junto com srcset para selecionar a imagem mais apropriada.

Exemplo: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" src="medium.jpg" alt="...">.

Condições de media: (max-width: 600px) 100vw → Em telas menores que 600px, a imagem ocupa 100% da largura do viewport.

Fallback: O último valor (33vw) é o tamanho padrão. Este valor é usado quando nenhuma condição de media corresponde.

vw (viewport width): 100vw = largura do viewport. 50vw = metade da largura do viewport.

Art Direction

Art direction serve diferentes composições de imagem (crop, zoom) em diferentes tamanhos de tela. Feito com o elemento <picture>.

Exemplo: <picture><source media="(min-width: 800px)" srcset="desktop.jpg"><source media="(min-width: 400px)" srcset="tablet.jpg"><img src="mobile.jpg" alt="..."></picture>.

Casos de uso: Diferentes crops para imagens hero. Imagem vertical no mobile, horizontal no desktop. Diferentes versões para logos e ícones.

Seleção de formato: Com <picture> também podem ser servidos diferentes formatos: <source type="image/webp" srcset="image.webp"><img src="image.jpg" alt="...">.

Lazy Loading e Async Decoding

loading="lazy": Carrega a imagem apenas quando se aproxima do viewport. Aumenta a velocidade de carregamento da página e economiza largura de banda.

decoding="async": Separa o processo de decodificação da imagem do thread principal. Não bloqueia a renderização da página.

fetchpriority="high": Alta prioridade para a imagem LCP. O navegador carrega esta imagem antes.

Placeholder: Mostre um placeholder de baixa resolução com a técnica blur-up. Um placeholder borrado é mostrado enquanto a imagem carrega.

Dicas de Desempenho

Formatos de imagem: Use WebP ou AVIF. 25-50% menor que JPEG. Sirva JPEG/PNG como fallback.

Compressão: Comprima as imagens. Use TinyPNG, Squoosh ou ImageOptim. Quality 80-85 geralmente é suficiente.

Dimensões: Adicione atributos width e height às imagens. Previne CLS (Cumulative Layout Shift).

CDN: Sirva as imagens de CDN. CDN de imagens como Cloudinary, Imgix realizam resize e conversão de formato automaticamente.

Teste de imagens responsivas: Verifique qual imagem é carregada na aba Network do Chrome DevTools. Teste em diferentes viewports.