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

HTML: Imagens Responsivas HTML

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.

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

HTML 
<!-- Com configuração de viewport (recomendado) -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #e3f2fd; }
</style>
</head>
<body>
<div class="box">
<h1>Olá, Mobile!</h1>
<p>Quando visualizado em um celular, o tamanho do texto é adequado e uma tela mostra todo o conteúdo.</p>
</div>
</body>

<!-- Sem configuração de viewport -->
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #ffebee; }
</style>
</head>
<body>
<div class="box">
<h1>Olá, Mobile!</h1>
<p>Quando visualizado em um celular, a página é reduzida para 980px e o texto fica muito pequeno.</p>
</div>
</body>
▶ Experimente

2. Responsividade de Imagens

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

▶ Exemplo

HTML 
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 20px; }
.container {
width: 80%;
max-width: 600px;
border: 2px dashed #999;
padding: 10px;
margin-bottom: 20px;
}
.img-max {
max-width: 100%;
height: auto;
}
.img-full {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>max-width: 100% (mantém a proporção, sem distorção)</h2>
<div class="container">
<img src="https://via.placeholder.com/800x400" alt="Imagem de exemplo" class="img-max">
<p>Imagem original com 800px de largura, container com 600px. A imagem é reduzida para 600px sem distorção.</p>
</div>

<h2>width: 100% (preenche o container)</h2>
<div class="container">
<img src="https://via.placeholder.com/800x400" alt="Imagem de exemplo" class="img-full">
<p>A imagem sempre preenche a largura do container. Adicione height: auto para evitar distorção.</p>
</div>
</body>
</html>
▶ 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

HTML 
<!-- Seleção com base na densidade da tela -->
<img src="foto-1x.jpg"
srcset="foto-1x.jpg 1x, foto-2x.jpg 2x, foto-3x.jpg 3x"
alt="Foto de exemplo">

<!-- Seleção com base na largura do viewport + sizes descreve a largura de exibição -->
<img src="pequena.jpg"
    srcset="pequena.jpg 480w,
            media.jpg 768w,
             grande.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 80vw,
                               60vw"
alt="Exemplo de imagem responsiva">
▶ 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

HTML 
<picture>
<!-- Tela larga >= 1200px: mostra panorama completo -->
<source media="(min-width: 1200px)" srcset="paisagem-completa.jpg">
<!-- Tela média >= 768px: mostra visão média -->
<source media="(min-width: 768px)" srcset="paisagem-media.jpg">
<!-- Tela pequena < 768px: mostra close-up cortado -->
<source media="(max-width: 767px)" srcset="paisagem-recortada.jpg">
<!-- Fallback: exibido quando o navegador não suporta picture -->
<img src="paisagem-media.jpg" alt="Foto de paisagem">
</picture>
▶ Experimente

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

▶ Exemplo

HTML 
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="Foto">
</picture>
▶ 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.

❓ 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%