Imagens responsivas deixam o navegador escolher a melhor imagem para o dispositivo — economizando largura de banda em telefones e servindo imagens nítidas em telas de alta DPI.
srcset + sizes — mesma imagem, resoluções diferentes
html
Imagens responsivas deixam o navegador escolher a melhor imagem para o dispositivo — economizando largura de banda em telefones e servindo imagens nítidas em telas de alta DPI.
srcset lista imagens candidatas com suas larguras intrínsecas (400w = 400px de largura).sizes diz ao navegador quão largo a imagem será exibida em diferentes pontos de interrupção (aqui: largura total da janela de visualização abaixo de 600px, caso contrário, metade).sizes + a densidade de pixels do dispositivo para escolher a menor imagem que ainda parece nítida — antes de baixar qualquer coisa.Um telefone pode escolher small.jpg; um laptop Retina exibindo-o em 50% de largura pode escolher large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
O navegador usa a primeira <source> que ele suporta/corresponde. Use <picture> quando você precisa de formatos diferentes (servir AVIF/WebP com fallback JPEG) ou um corte diferente por tamanho de tela (direção artística) — coisas que srcset sozinho não pode fazer.
srcset + sizes.<picture>.Servir imagens de tamanho correto e em formato moderno é uma das maiores vitórias de desempenho da web — reduz drasticamente o uso de dados móveis e melhora o Largest Contentful Paint.
Essas ferramentas nativas permitem que o navegador faça a escolha ideal automaticamente, com fallbacks graciosos para navegadores mais antigos.