0Pricing
HTML Academy · Aula

Imagens responsivas com srcset e sizes

Fornecer imagens com dimensões adequadas a diferentes densidades de ecrã.

Imagens responsivas com srcset e sizes é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O problema das imagens únicas

Enviar uma única imagem grande para todos os dispositivos desperdiça largura de banda em telas pequenas:

  • Um celular com tela de 390px não precisa de uma imagem de 2400px
  • Um monitor 4K merece uma imagem de resolução maior que 96dpi
  • Imagens responsivas fornecem a imagem certa para a tela certa

O atributo srcset

srcset fornece uma lista de origens de imagem com suas larguras:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Descritores de densidade de pixels

Use os descritores 1x, 2x e 3x para imagens de tamanho fixo em diferentes resoluções:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

O atributo sizes

sizes informa ao navegador qual será a largura de exibição da imagem em diferentes tamanhos da janela de visualização:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Como o navegador seleciona uma imagem

O navegador calcula: valor de sizes × proporção de pixels do dispositivo para escolher entre as opções de srcset:

  • Janela de visualização de 600px, DPR de 2×, tamanho=100vw → precisa de uma imagem de 1200px → escolhe 1600w
  • Janela de visualização de 1200px, DPR de 1×, tamanho=50vw → precisa de uma imagem de 600px → escolhe 800w
  • Depois de carregada, a imagem é armazenada em cache e pode não ser carregada novamente

Valor padrão de sizes

Sem sizes, o navegador presume que a imagem ocupa toda a largura da janela de visualização (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

Descritores de largura de srcset versus descritores x

Há dois modos de usar srcset:

  • Descritores de largura (w) — com sizes: seleção fluida e consciente do layout
  • Descritores de densidade de pixels (x) — imagens de tamanho fixo em várias resoluções

Use descritores w para a maioria das imagens responsivas. Use x para ícones, logotipos e elementos de tamanho fixo.

Gerando arquivos srcset

Ferramentas que geram variações responsivas de imagens:

  • Sharp (Node.js) — redimensionamento programático de imagens
  • Squoosh — baseado no navegador, com comparação visual
  • Cloudinary / Imgix — redimensionamento sob demanda com base em URL
  • Plugins do Webpack / Vite — geração durante a compilação

srcset com WebP e alternativa

Combine srcset com <picture> para ter uma alternativa de formato:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Direção artística versus alternância de resolução

Há dois tipos de problemas com imagens responsivas:

  • Alternância de resolução — mesma imagem, resoluções diferentes → use srcset + sizes
  • Direção artística — recorte ou composição diferentes em telas diferentes → use <picture> com <source media>

Testando imagens responsivas

Como verificar se seu srcset está funcionando:

  • Abra o DevTools → aba Rede → filtre por Imagens
  • Configure a emulação de dispositivos para diferentes tamanhos de janela de visualização e DPRs
  • Recarregue — verifique qual arquivo o navegador solicita
  • Verifique também: Lighthouse → Desempenho → auditoria de imagens com tamanho adequado

Suporte do navegador a srcset

O suporte dos navegadores a srcset é excelente:

  • Compatível com todos os navegadores modernos, como Chrome, Firefox, Safari e Edge
  • A alternativa src atende aos navegadores antigos
  • Nenhum preenchimento de compatibilidade é necessário para uso em produção

Verificação rápida

O que o atributo sizes informa ao navegador?

Recapitulação: srcset e sizes

Elementos essenciais das imagens responsivas:

  • srcset — lista de arquivos de imagem com suas larguras intrínsecas ou densidades de pixels
  • sizes — condições de mídia que descrevem a largura de exibição da imagem
  • O navegador seleciona a melhor opção: valor de sizes × DPR do dispositivo
  • Descritores de largura (w) para imagens fluidas; x para elementos de tamanho fixo
  • Sempre forneça src como alternativa

Perguntas Frequentes

A aula “Imagens responsivas com srcset e sizes” é grátis?

Sim — o texto completo de “Imagens responsivas com srcset e sizes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Imagens responsivas com srcset e sizes”?

Fornecer imagens com dimensões adequadas a diferentes densidades de ecrã. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Imagens responsivas com srcset e sizes”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O elemento img: src, alt, width e height
  2. Imagens responsivas com srcset e sizes
  3. O elemento picture para direção artística
  4. figure e figcaption
← Voltar para HTML Academy