English 中文 العربية 日本語 Português

HTML: Imagens Responsivas HTML

Última atualização: 2026-09-08

A mesma imagem deve ser exibida em diferentes tamanhos e resoluções em celulares, tablets e desktops — isso é "imagens responsivas". Aprenda como tornar as imagens nítidas, eficientes em largura de banda e de carregamento rápido em todos os tamanhos de tela.

Tags nesta seção: <meta> <picture> <source> <img>

1. Configurações de Viewport

O primeiro passo no design responsivo é configurar o viewport. Sem ele, os navegadores móveis reduzem a página para uma largura de 980px para exibição, tornando o texto e as imagens muito pequenos. Adicione esta tag <meta> e a largura da página corresponderá à tela do dispositivo:

▶ Exemplo

▶ Experimente

2. Responsividade de Imagens

As duas propriedades CSS mais usadas para fazer imagens se adaptarem automaticamente à largura do container:

▶ Exemplo

▶ Experimente
📌 A velocidade de carregamento da imagem importa. Usar CSS para reduzir uma imagem grande apenas a faz "parecer menor" — o navegador ainda baixa o arquivo original em tamanho completo. É melhor cortar as imagens para o tamanho correto antes de enviá-las: imagens pequenas para celular, imagens grandes para desktop. Isso pode melhorar drasticamente a velocidade de carregamento.

3. O Atributo srcset

srcset permite que o navegador selecione automaticamente a imagem mais adequada com base na densidade da tela (1x, 2x, 3x) ou na largura do viewport. Basta fornecer múltiplas versões da imagem, e o navegador "escolhe inteligentemente":

▶ Exemplo

▶ Experimente

Existem duas formas comuns de usar srcset:

4. O Elemento <picture>

<picture> é mais flexível que srcset. Ele permite carregar imagens completamente diferentes em diferentes larguras de tela — por exemplo, uma imagem panorâmica em telas largas e um close-up cortado em telas estreitas (isso é chamado de "direção de arte" em design):

▶ Exemplo

▶ Experimente

<picture> também é comumente usado para oferecer múltiplos formatos de imagem (como WebP), com o navegador selecionando o primeiro formato suportado:

▶ Exemplo

▶ Experimente

O navegador verifica cada <source> de cima para baixo. Se suportar o formato, ele carrega; se nenhum for suportado, ele volta para <img>. Assim, você aproveita os benefícios de compressão dos novos formatos enquanto mantém a compatibilidade.

Tags nesta seção: <meta> <picture> <source> <img>

❓ Perguntas Frequentes

P Qual é a diferença entre srcset e sizes?
R srcset fornece múltiplas fontes de imagem com suas resoluções (como 480w, 768w), enquanto sizes diz ao navegador o tamanho real de exibição da imagem em diferentes larguras de viewport (como (max-width: 480px) 100vw). O navegador calcula qual imagem carregar com base em ambas as informações. Simplesmente：srcset é "quais imagens estão disponíveis", sizes é "quão grande a imagem será em diferentes situações".
P Por que não usar JavaScript para detectar o tamanho da tela e trocar imagens?
R Usar srcset+sizes tem três vantagens：1）O navegador pode decidir qual imagem carregar enquanto analisa o HTML, sem esperar a execução do JavaScript; 2）Funciona mesmo quando JavaScript está desabilitado; 3）O navegador pode escolher de forma mais inteligente (considerando condições de rede, proporção de pixels do dispositivo, etc.). JavaScript é adequado apenas para cenários complexos de direção de arte (como composições diferentes); simples troca de resolução é tratada por srcset.
P Quando uso <picture> vs srcset?
R srcset é para "diferentes versões de resolução da mesma imagem" — o navegador seleciona automaticamente a nitidez apropriada. <picture> é para "exibir imagens diferentes em diferentes cenários" — que podem ser composições diferentes (direção de arte) ou formatos diferentes (WebP/AVIF/JPG). Regra simples：se apenas a nitidez difere, use srcset; se a composição ou formato difere, use <picture>.
P Imagens responsivas afetam o SEO?
R Imagens responsivas usadas corretamente impactam positivamente o SEO：1）Melhoram a velocidade de carregamento da página (métricas Core Web Vitals); 2）Melhoram a experiência do usuário mobile; 3）Mecanismos de busca podem indexar texto alt. Nota：imagens em srcset devem ser versões diferentes do mesmo conteúdo — não use imagens completamente diferentes, ou mecanismos de busca podem considerar enganoso.

📖 Resumo

📝 Exercícios

  1. Galeria de Imagens Responsiva: Crie uma página de galeria com 3 imagens, usando max-width: 100% em cada uma para garantir que sejam exibidas completamente no celular. Use srcset para fornecer versões 1x e 2x para cada imagem.
  2. Prática de Direção de Arte: Use <picture> para implementar: desktop mostra uma foto de paisagem com 1200px de largura, tablet mostra uma versão cortada de 768px, celular mostra um close-up de 480px. Use media queries min-width para controlar os breakpoints.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%