Blog ComercialWeb - São Paulo - SP
E-mail: [email protected]
Home » Programação » HTML5
Atualizado: 06/10/2025

Imagens responsivas com picture, srcset e sizes — HTML5 na prática

Imagens responsivas em HTML5

Quando usar picture vs srcset

  • picture: troca de arte/recorte ou formato (ex.: WebP vs JPG).
  • img + srcset: mesma arte, múltiplas resoluções.

Exemplo com picture

<picture>
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w" sizes="(max-width: 900px) 90vw, 800px">
  <img src="hero-800.jpg" srcset="hero-800.jpg 800w, hero-1200.jpg 1200w" sizes="(max-width: 900px) 90vw, 800px" width="1200" height="630" alt="Capa do artigo" loading="lazy" fetchpriority="low">
</picture>

Exemplo com img + srcset

<img src="thumb-400.jpg" srcset="thumb-400.jpg 400w, thumb-800.jpg 800w, thumb-1200.jpg 1200w" sizes="(max-width: 600px) 90vw, (max-width: 1200px) 50vw, 400px" width="400" height="225" alt="Miniatura" loading="lazy">

Boas práticas de performance

  • Defina width/height ou use aspect-ratio para reduzir CLS.
  • Use lazy para imagens fora da dobra e fetchpriority="high" na imagem principal.
  • Comprima em WebP/AVIF quando possível e mantenha fallback em JPG/PNG.
Fonte: Redação


Mais Lidos

» Como deixar layout responsivo com HTML5 e CSS3.


» Container Queries em CSS — Layouts adaptativos com @container.