Imagens HTML
Aprenda a incorporar imagens com a tag img do HTML: src e alt, width/height para evitar saltos de layout, srcset e picture responsivos e lazy loading.
Para incorporar uma imagem a uma página web, use a tag <img>.
A tag <img> suporta vários atributos obrigatórios e opcionais, que fornecem informações adicionais sobre ela.
Sintaxe
A tag <img> é vazia, o que significa que a tag de fechamento não é necessária. Ela contém apenas atributos. Mas em XHTML, a tag (<img>) deve ser fechada (<img/>).
Atributos Obrigatórios de Imagem - src e alt
O atributo src (source) especifica o nome ou a localização da imagem a ser exibida. Seu valor pode ser um caminho relativo (um arquivo em seu próprio projeto) ou uma URL absoluta (uma imagem hospedada em outro lugar).
Caminho relativo — a imagem está no seu projeto, junto ao arquivo HTML:
<img src="images/example.jpg" alt="A description of the image" />URL absoluta — a imagem está hospedada em outro servidor:
<img src="https://www.example.com/images/example.jpg" alt="A description of the image" />O atributo alt fornece um texto alternativo que é exibido caso a imagem não carregue (conexão lenta, caminho quebrado) e lido em voz alta por leitores de tela. Há dois casos:
- Imagens significativas — forneça ao
altuma descrição curta e precisa do que a imagem transmite (alt="Gráfico de barras de vendas de 2024"). - Imagens decorativas que não acrescentam nada ao conteúdo — use
alt=""vazio. Os leitores de tela então ignoram a imagem em vez de anunciar um nome de arquivo sem sentido.
Sempre inclua o atributo. Omitir alt completamente é diferente de alt="" e é sinalizado como um erro de acessibilidade.
Nota: o comportamento de dica ao passar o cursor é controlado pelo atributo title, não por alt.
A sintaxe da tag <img> com os atributos obrigatórios src e alt ficará assim:
Exemplo de Imagem HTML
<img src="example.jpg" alt="HTML tutorial" />Use o atributo alt para todas as imagens, fornecendo uma descrição clara e concisa do conteúdo da imagem, o que melhora a acessibilidade e ajuda os mecanismos de busca a entender sua página.
Atributos de Imagem Recomendados - width e height
Sempre defina os atributos width e height em um <img>. Eles informam ao navegador a proporção de aspecto da imagem antes que o arquivo seja baixado, para que ele possa reservar exatamente o espaço certo no layout desde o início.
Sem eles, a página é reorganizada assim que cada imagem chega — textos e outros elementos se deslocam para abrir espaço. Esse salto visual é chamado de Cumulative Layout Shift (CLS), um dos Core Web Vitals do Google e uma fonte comum de cliques acidentais. Fornecer as dimensões evita isso.
Exemplo de Imagem HTML
<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />Os atributos recebem números de pixels sem unidade (width="200", não width="200px"). Você ainda pode redimensionar a imagem com CSS — o navegador usa os valores dos atributos apenas para calcular a proporção de aspecto e evitar o salto de layout.
Exemplo da tag HTML <img> com os atributos src, alt, width e height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<p>This is Aleq's photo</p>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Resultado
Mantenha os atributos width e height para a proporção de aspecto e, em seguida, use as propriedades CSS max-width ou max-height para adicionar flexibilidade. Isso evita que imagens grandes transbordem o layout em telas pequenas.
Tornando imagens fluidas (responsivas)
Para evitar que uma imagem transborde seu contêiner em telas estreitas, aplique esta regra CSS. É a linha mais útil de CSS para imagens:
img {
max-width: 100%;
height: auto;
}max-width: 100% limita a imagem renderizada à largura de seu contêiner, fazendo com que ela encolha em telas pequenas, mas nunca escale além de seu tamanho natural ficando borrada. height: auto permite que a altura acompanhe, para que a imagem mantenha suas proporções em vez de distorcer.
Isso funciona em conjunto com os atributos width/height: os atributos reservam o espaço da proporção de aspecto (sem CLS), enquanto o CSS torna o tamanho renderizado real fluido.
Flutuação de Imagens
Por padrão, um elemento <img> é inline, então ele fica na linha do texto. Você pode envolver texto ao redor de uma imagem com a propriedade CSS float — defina float: left ou float: right.
Float é uma técnica legada para esse tipo de layout. Para qualquer coisa além de simplesmente envolver um parágrafo ao redor de uma imagem — galerias, mídia lado a lado, cartões — use Flexbox ou CSS Grid. Eles oferecem alinhamento, espaçamentos e quebras sem as peculiaridades de limpeza que o float exige.
Para exibir a imagem à esquerda e o texto à direita, adicione float: left. Prefira uma classe CSS em vez de um atributo style inline para melhor manutenibilidade.
Exemplo da tag <img> e a propriedade CSS float para flutuar uma imagem para a esquerda:
Exemplo de uma Imagem com float|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleq's photo</p>
</body>
</html>Adicionar o atributo style="float:right" à tag <img> posiciona o texto à esquerda e a imagem à direita.
Exemplo da tag <img> e a propriedade CSS float para flutuar uma imagem para a direita:
Exemplo com atributo float:right|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleq's photo</p>
</body>
</html>Resultado
Como adicionar um hiperlink a uma imagem
Como a tag <a> é usada para inserir hiperlinks, basta colocar a imagem dentro da tag <a> para tornar sua imagem clicável.
Exemplo das tags <a> e <img> para adicionar um hiperlink a uma imagem:
Exemplo de uma imagem com hiperlink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Imagens responsivas: servindo o arquivo correto
Uma única imagem raramente se encaixa em todas as telas. Enviar uma foto de 2000px para um celular desperdiça largura de banda; enviar uma pequena para um display 4K fica borrada. O HTML oferece duas ferramentas para permitir que o navegador escolha o melhor arquivo para cada dispositivo.
srcset e sizes (mesma imagem, tamanhos diferentes)
Use os atributos srcset e sizes no <img> quando você tem a mesma imagem em várias larguras e quer que o navegador baixe a mais adequada.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
width="800"
height="600"
alt="A scenic mountain lake"
/>srcsetlista os arquivos candidatos com suas larguras intrínsecas (400wsignifica que o arquivo tem 400px de largura).sizesinforma ao navegador quão larga a imagem será exibida — aqui, largura total do viewport abaixo de 600px, caso contrário, metade. O navegador combina isso com a densidade de pixels do dispositivo para escolher o menor arquivo que ainda pareça nítido.srcpermanece como fallback para navegadores muito antigos.
O elemento picture (formatos diferentes ou direção de arte)
O elemento <picture> envolve vários elementos <source> e um <img>. O navegador percorre as sources de cima para baixo e usa a primeira que ele suporta, recorrendo ao <img> se nenhuma corresponder.
O uso clássico é servir um formato moderno e menor com um fallback garantido:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" />
</picture>Um navegador que entende AVIF baixa o arquivo AVIF; o que entende apenas WebP usa esse; todo o resto recorre ao JPEG. O <img> é obrigatório — ele fornece o texto alt e o fallback. Você também pode usar <picture> para direção de arte: exibindo uma imagem recortada em retrato em celulares e uma larga em desktops por meio de atributos media em cada <source>.
Lazy loading e decodificação
Por padrão, o navegador baixa avidamente todas as imagens da página. Para imagens muito abaixo da dobra, isso é esforço desperdiçado antecipadamente. Adicione loading="lazy" para que o navegador só busque a imagem quando ela se aproximar do viewport:
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" loading="lazy" />Use loading="lazy" para imagens fora da tela, mas não para sua maior imagem acima da dobra (como um hero ou elemento LCP) — adiar essa imagem prejudica o carregamento percebido.
Você também pode adicionar decoding="async", que permite ao navegador decodificar a imagem fora da thread principal para não bloquear a renderização do conteúdo ao redor.
Qual formato de imagem escolher para a web
Existem três tipos principais de formatos de imagem suportados pelos navegadores:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF possui 256 cores únicas que tornam os gráficos simples e de carregamento rápido. Você pode usar GIF para pequenos desenhos, diagramas, gráficos, botões e outros elementos gráficos simples, que não impedirão que sua página carregue rapidamente.
JPEG é tipicamente um formato de 24 bits que combina luz vermelha, azul e verde para exibir milhões de cores. Assim, é usado principalmente para fotografias. Este formato oferece a flexibilidade de escolher quanto comprimir sua imagem — de 0% (compressão pesada) a 100% (sem compressão). Você pode escolher este formato se não se importar em sacrificar um pouco de qualidade para reduzir o tamanho. Evite usar JPEG para imagens com texto, formas ou grandes blocos de cores, pois quando o arquivo é comprimido, as linhas ficam borradas e as cores mudam.
O formato PNG combina os benefícios de JPEG e GIF: suporta milhões de cores e permite compressão sem perdas. Você pode usar PNG para gráficos web que exigem transparência, gráficos com muitas cores e gráficos complexos ou fotografias.
Formatos de imagem modernos
Dois formatos modernos agora são amplamente suportados nos navegadores e produzem arquivos menores e de carregamento mais rápido do que JPEG ou PNG.
WebP, desenvolvido pelo Google, suporta compressão lossless e lossy, bem como transparência e animação. Arquivos WebP são tipicamente 25–35% menores do que um JPEG ou PNG equivalente e são suportados por todos os principais navegadores atuais. (WebP - Wikipedia)
AVIF é um formato mais recente baseado no codec de vídeo AV1. Geralmente comprime ainda melhor do que WebP com a mesma qualidade visual e suporta uma ampla gama de cores, tornando-o excelente para fotografias. O suporte dos navegadores agora é amplo, mas ligeiramente atrás do WebP.
Como nem todo navegador de cada visitante suporta o formato mais recente, sirva-os com um elemento <picture> e um fallback JPEG ou PNG, conforme mostrado na seção de imagens responsivas acima. O navegador então escolhe o melhor formato que ele entende.
Você ainda pode encontrar formatos mais antigos como BPG e HEIC da Apple. Nenhum deles é suportado por navegadores web, portanto, evite-os para imagens na web — converta para WebP ou AVIF.