Diz o ditado que uma imagem vale mais que mil palavras, mas na web uma imagem mal implementada pode destruir a velocidade de carregamento da sua página e excluir completamente usuários que dependem de tecnologias assistivas. No HTML, a inserção de recursos visuais é controlada pela tag <img>. Dominar seus atributos essenciais de acessibilidade, dimensionamento e carregamento diferido é indispensável para construir sites modernos e velozes.

1. Anatomia Básica da Tag <img>

A tag <img> é um elemento vazio (void element): ela não possui conteúdo de texto interno e, portanto, nunca possui tag de fechamento (não existe </img>).

Para funcionar corretamente, ela exige no mínimo dois atributos fundamentais:

<img src="paisagem-montanhas.webp" alt="Montanhas cobertas de neve sob o pôr do sol">

• src (de Source / Origem): O endereço ou caminho do arquivo da imagem (pode ser um caminho relativo local como imagens/foto.webp ou uma URL absoluta externa como https://...).
• alt (de Alternative Text / Texto Alternativo): A descrição textual que substitui a imagem caso o arquivo quebre ou a conexão do usuário esteja lenta.

2. A Arte e a Ciência do Atributo alt (Acessibilidade & SEO)

O atributo alt é um dos itens mais fiscalizados pelas diretrizes mundiais de acessibilidade digital (WCAG) e pelos robôs de indexação do Google Imagens:

1. Leitores de Tela para Deficientes Visuais: Quando uma pessoa cega navega pelo seu site com softwares como NVDA ou VoiceOver, o sintetizador de voz lê exatamente o que está escrito no alt.
2. Indexação no Google: Robôs de busca não “enxergam” fotos da mesma forma que os humanos; eles dependem primordialmente do texto alternativo para entender o contexto da imagem e exibi-la nas buscas.

3. Prevenindo Saltos de Layout (CLS) com width e height

Você já começou a ler um artigo em um site e, de repente, a página inteira “pulou” para baixo porque uma imagem demorou para carregar e empurrou o texto?

Esse erro gravíssimo de experiência do usuário é medido pelo Google através da métrica Cumulative Layout Shift (CLS) do Core Web Vitals.

A solução é simples e obrigatória: sempre declare as dimensões intrínsecas (largura e altura) na tag <img>:

<img src="banner-curso.webp" alt="Alunos estudando programação web" width="1200" height="630">

4. Carregamento Inteligente com loading=”lazy”

Em páginas longas com muitas fotos, baixar todas as imagens de uma vez gasta a franquia de dados móveis do visitante e deixa o carregamento inicial lento.

O HTML5 possui uma solução nativa revolucionária: o atributo loading=”lazy”:

<!-- A imagem só será baixada quando o usuário rolar a página até perto dela: -->
<img src="galeria-foto-10.webp" alt="Fachada moderna do estúdio digital" width="800" height="600" loading="lazy">

• loading="lazy": Adie o carregamento para imagens que estão abaixo da dobra (fora da visão inicial).
• loading="eager": Valor padrão (carregamento imediato). Utilize na imagem principal do topo (Hero Image / LCP) para que ela apareça o mais rápido possível.

5. Formatos de Imagem Modernos da Web

Para atingir pontuação máxima de velocidade no Google PageSpeed Insights, prefira formatos modernos de alta compressão:

• WEBP: Desenvolvido pelo Google, é cerca de 30% a 50% mais leve que o JPG e PNG, suportando transparência e animações com nitidez cristalina. É o formato padrão da Web Academy.
• AVIF: O formato de última geração com a compressão mais agressiva e alta fidelidade de cores da indústria.
• SVG: Gráficos vetoriais perfeitos para logotipos, ícones e diagramas. Como são baseados em código matemático, nunca perdem nitidez em nenhuma resolução e pesam poucos kilobytes.

6. Exemplo Prático Integrado

Veja a estrutura completa e profissional de uma imagem moderna:

<figure class="card-ilustracao">
  <img 
    src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800" 
    alt="Notebook exibindo linhas de código em um ambiente de trabalho moderno" 
    width="800" 
    height="533" 
    loading="lazy"
    class="imagem-arredondada">
  <figcaption>Ambiente de desenvolvimento profissional configurado para aulas práticas.</figcaption>
</figure>

7. Tabela de Referência da Tag <img>

8. Ferramentas Web-ZoneWare para Otimizar Imagens

Aproveite as ferramentas da nossa suíte para preparar suas imagens antes de publicá-las no HTML:

• Hub Master de Imagens: Acesso central a mais de 60 utilitários para recortar, comprimir e converter fotos.
• Conversor JPG para WEBP: Reduza o peso dos seus arquivos em até 70% preservando total nitidez visual.
• Redimensionador de Imagens em Lote: Ajuste largura e altura de dezenas de fotos simultaneamente para zerar o CLS.
• Playground Web IDE: Pratique a aplicação de imagens e tags <figure> no navegador.

9. Links Oficiais de Autoridade

• W3C WAI — Tutorial Oficial de Acessibilidade em Imagens: As regras universais de decisão do atributo alt.
• MDN Web Docs — O Elemento de Imagem (<img>): O guia técnico de referência da Mozilla.
• Google Web.dev — Otimizando o Cumulative Layout Shift (CLS): Engenharia de performance do Google para dimensionamento de mídia.

10. Exercício Prático da Lição 12

1. Abra o Playground Web IDE.
2. Insira uma imagem utilizando a tag <img> apontando para uma URL da web (você pode utilizar o exemplo do Unsplash fornecido nesta lição).
3. Escreva um texto alternativo (alt) descritivo e preciso, sem usar a expressão “foto de”.
4. Declare os atributos width="800" e height="533" e observe a estabilidade do layout.
5. Adicione o atributo loading="lazy" para treinar as boas práticas de Core Web Vitals.