Como usar a tag img no HTML: Guia do Atributo src e alt

<< Tutorial Anterior Sumário do Curso Próximo Tutorial >>

No artigo anterior de nossa apostila de HTML, compreendemos o que define uma imagem digital e mapeamos as características fundamentais de formatos como JPG, PNG e GIF. Agora que você já possui essa base conceitual sólida, chegou a hora de colocar a mão na massa e aprender a inserir mídias visuais na estrutura de um site através do código.

Neste tutorial, destrincharemos o funcionamento técnico da tag <img>, o papel vital do atributo de origem src (source), as regras essenciais para organizar seus arquivos em diretórios e como evitar falhas graves de carregamento de páginas.

A Tag <img> — O Que É e Por Que Ela É Diferente?

Para renderizar qualquer elemento gráfico em uma página web, utilizamos a tag <img>. A primeira grande surpresa para quem está iniciando o aprendizado de tags estruturais é notar que a <img> é uma tag vazia (void element). Isso significa que ela não possui uma tag de fechamento correspondente (como </img>) e não encapsula textos diretamente.

Em vez de conter o conteúdo diretamente no documento, a tag funciona como um marcador de posição. Ela instrui o mecanismo de renderização do navegador a abrir uma requisição separada para buscar um arquivo externo e inseri-lo naquele ponto exato do layout. Toda a configuração e o comportamento da imagem são controlados através de seus atributos:

src (Source): Define o caminho ou URL onde o arquivo da imagem está armazenado. É o único atributo estritamente obrigatório para que a mídia apareça.
alt (Alternate Text): Elemento crucial para acessibilidade (leitores de tela para deficientes visuais) e SEO. Caso a imagem não carregue ou o link seja quebrado, este texto assume o seu lugar.
width e height: Especificam as dimensões exatas (largura e altura) da imagem em pixels, impedindo que o layout sofra quebras bruscas de movimentação (métrica CLS do Google) durante o carregamento de mídia pesada.

Como Funciona o Fluxo de Carregamento de Endereços de Mídia?

Quando lidamos com tags textuais clássicas, a renderização do conteúdo ocorre de maneira quase instantânea, pois a string textual já está embutida diretamente dentro do próprio arquivo de extensão .html recebido pelo cliente.

Com mídias estruturadas, o fluxo é diferente e assíncrono. O navegador web lê as linhas de código sequencialmente. Quando encontra uma tag de imagem, ele interrompe temporariamente o processamento visual daquele ponto do layout, extrai o endereço fornecido no parâmetro de origem e dispara uma nova requisição HTTP independente direcionada ao servidor que hospeda o arquivo.

Como os arquivos binários de mídias gráficas acumulam um volume de dados consideravelmente maior do que meras linhas de texto, as fotos costumam ser os últimos elementos visuais a terminar de carregar na tela do usuário. Por esse motivo, saber configurar com precisão milimétrica a localização exata do arquivo de imagem é um requisito obrigatório para qualquer webmaster profissional.

Apostila HTML e CSS Progressivo Completa

Estude no Seu Ritmo: Leve o Curso Completo em PDF!

Bateu aquela dúvida no meio do código e quer estudar offline, sem anúncios, distrações ou perda de foco? A nossa Apostila Completa de HTML & CSS Progressivo reúne todo o conhecimento necessário para transformar você em um desenvolvedor profissional disputado pelo mercado.

"Estava travado tentando entender a lógica dos caminhos de imagens e a semântica de mídias, essa apostila salvou meus projetos de estudos!" — Carlos, Desenvolvedor Front-End Júnior.

🚀 Baixar Versão Digital (PDF) 📖 Prefiro o Livro Físico Enviado à Minha Casa

Laboratório Prático: Salvando e Preparando sua Mídia de Teste

Para simularmos o funcionamento em ambiente real de produção, vamos utilizar o logotipo oficial do nosso curso. Clique com o botão direito sobre a imagem logo abaixo, selecione a opção "Salvar imagem como..." e salve-a obrigatoriamente com o nome exato de HTML-Progressivo.png no mesmo diretório de estudos onde você armazena seus códigos-fonte.

Se você abrir o navegador e digitar o caminho local completo do arquivo salvo no disco rígido, ele será renderizado diretamente na viewport. No ambiente Windows, o endereço se assemelhará a C:\Meus_Sites\HTML-Progressivo.png, enquanto no Linux ou MacOS parecerá com /home/usuario/Meus_Sites/HTML-Progressivo.png.

A URL ou caminho físico mapeado atua como a fundação de dados do atributo src. A estrutura sintática básica para a inserção é:

<img src="NOME_OU_URL_DA_IMAGEM.extensão" alt="Descrição Semântica da Mídia">

Mapeando Estruturas de Pastas de Forma Profissional

Manter arquivos de texto .html misturados aleatoriamente com dezenas de mídias visuais na raiz do projeto gera caos técnico e dificulta a manutenção estrutural. O padrão profissional adotado no mercado consiste em encapsular os elementos de mídia dentro de um subdiretório dedicado, geralmente batizado como imagens/ ou assets/.

Crie uma subpasta chamada imagens exatamente no mesmo local onde reside o seu arquivo index.html e mova o arquivo HTML-Progressivo.png para dentro dela. O mapeamento do seu código deve se adaptar à mudança apontando o novo Caminho Relativo:


<img src="imagens/HTML-Progressivo.png" alt="Logotipo HTML Progressivo">

⚠️ Erro Crítico de Principiante (Caminhos Absolutos de Sistema): Nunca, sob hipótese alguma, use caminhos de disco como src="C:\Meus_Sites\imagens\foto.png" no código de um site de produção. Esse link funciona exclusivamente na sua máquina local. Ao fazer o deploy dos arquivos para um servidor de hospedagem na internet, as mídias apresentarão falhas críticas de link quebrado, já que o servidor não possui acesso ao seu disco rígido local. Use sempre caminhos relativos!

Inserindo Imagens Armazenadas na Internet (Endereços Remotos)

O navegador trata caminhos internos armazenados localmente e URLs completas de servidores remotos de maneira equivalente. Para demonstrar isso na prática, utilizaremos mídias públicas hospedadas nos servidores globais da Wikimedia Foundation.

Abaixo está o código-fonte de uma estrutura de página HTML5 contendo dois elementos gráficos remotos: o logotipo corporativo do Google e o emblema da linguagem PHP:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Renderizando Mídias com a Tag <img></title>
    <meta name="description" content="Guia prático demonstrando o uso de tags de imagem e atributos de origem remota em código HTML.">
</head>
<body>

    <h1>Exibição Gráfica de Logos Corporativos</h1>

    
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" alt="Logotipo colorido clássico do Google em alta definição">

    
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/200px-PHP-logo.svg.png" alt="Logotipo estilizado oval azul da linguagem de programação PHP">

</body>
</html>

Ao rodar este script, note que as mídias serão exibidas automaticamente lado a lado. Isso acontece porque a tag <img> é estruturada por padrão com o comportamento de exibição inline. Ela ocupa apenas o espaço horizontal correspondente ao seu próprio tamanho físico e não força o surgimento automático de uma nova linha no layout, comportando-se como se fosse um caractere textual.

Modificando o Fluxo Visível das Imagens no Layout

Se a sua proposta de design gráfico exigir que as fotos fiquem dispostas verticalmente (uma abaixo da outra), você pode quebrar o fluxo linear inserindo tags de salto de linha (<br>) ou isolando cada mídia dentro de blocos de listas não ordenadas (<ul> e <li>):


<ul>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" alt="Logo Google"></li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/200px-PHP-logo.svg.png" alt="Logo PHP"></li>
</ul>

🛑 Alerta Sobre Práticas de Hotlinking: O ato de vincular imagens usando diretamente URLs de sites de terceiros (como fizemos acima com os links da Wikipedia) chama-se Hotlinking. Embora seja prático para testes em laboratório, evite fazer isso em sites profissionais. Você consome a largura de banda de servidores alheios indevidamente, viola diretrizes de tráfego e corre o risco de ver seu site quebrado repentinamente se o dono original deletar ou alterar o nome do arquivo. Sempre salve as mídias localmente e faça o upload no seu próprio servidor.

Exercícios de Fixação Prática

Realize os exercícios listados abaixo para testar e validar o conhecimento absorvido ao longo deste tutorial prático:

Escolha três álbuns ou bandas musicais de sua preferência. Encontre as artes de capa originais deles na web, salve os arquivos locais na pasta dedicada imagens/ do seu projeto e monte um layout estruturado em HTML para exibi-los sequencialmente.
Insira títulos descritivos posicionados imediatamente acima de cada imagem de capa criada no exercício anterior, usando tags de cabeçalho semânticas adequadas (<h3> ou <p>).
Reestruture a disposição visual do exercício anterior de modo que as imagens e seus respectivos títulos fiquem ordenados numericamente através de uma lista de numeração progressiva (<ol>).
O Desafio da Transparência: Altere a cor de fundo nativa do escopo de corpo do seu site (<body style="background-color: #3b82f6;">) para uma tonalidade azul escura. Observe com atenção o comportamento dos contornos do logo do Google e do PHP. O que acontece com as áreas transparentes dessas artes de formato PNG em comparação ao fundo da página? Escreva sua resposta em um bloco de parágrafo no rodapé do documento.

Perguntas Frequentes sobre a Tag <img> (FAQ)

O que acontece se eu esquecer de incluir o atributo alt na tag img?

O código continuará renderizando a imagem normalmente no navegador, mas você cometerá um erro grave de acessibilidade e de otimização de SEO. Sem o texto alternativo (alt), mecanismos de busca como o Google não conseguem catalogar de forma indexada o teor visual da imagem, e deficientes visuais que dependem de leitores de tela ouvirão apenas o nome técnico do arquivo binário bruto.

Qual é a diferença funcional entre caminhos relativos e absolutos no HTML?

Um caminho absoluto mapeia a URL inteira de destino partindo da raiz da internet (ex: https://site.com/foto.png) ou do próprio sistema de arquivos do computador (ex: C:/pasta/foto.png). Já um caminho relativo mapeia o destino tendo como referência a localização atual do próprio arquivo HTML que chama a tag (ex: imagens/logo.png). Caminhos relativos são fundamentais para garantir a portabilidade do site ao enviá-lo para uma hospedagem na web.

Aprofunde Seus Estudos de Desenvolvimento Front-End:

Dominando o Atributo Alt e Títulos para Acessibilidade Gráfica Completa
Como Controlar Altura (Height) e Largura (Width) para Otimizar o PageSpeed
Utilizando Imagens como Links de Redirecionamento de Navegação no HTML