HTML5 Mestre dos Mestres • Aula Suprema 18

Inserindo Imagens

Imagem na web não é apenas enfeite. Ela comunica informação, reforça contexto, vende, ensina e guia. Nesta aula, você domina a tag img, os atributos src, alt, width e height, além dos formatos JPG, PNG, SVG e WebP.

Voltar ao Módulo HTML5 Ir para o Desafio Mestre

1. O que é a tag img

A tag <img> incorpora uma imagem no documento HTML. Ela é uma tag vazia porque não envolve conteúdo entre abertura e fechamento. Em vez disso, ela depende de atributos para funcionar.

<img src="imagens/banner-principal.webp" alt="Banner principal da escola de HTML5">

Erro de iniciante:

Achar que basta a imagem aparecer. O profissional valida caminho, peso, descrição alternativa, tamanho, formato, acessibilidade e funcionamento no GitHub Pages.

2. src e alt

src

Define o caminho da imagem. Sem src válido, a imagem quebra.

<img src="imagens/logo-mestre.png" alt="Logotipo da escola Mestre HTML5">

alt

Define o texto alternativo. Ele é essencial para acessibilidade, SEO e fallback quando a imagem não carrega.

<img src="imagens/grafico-vendas.webp" alt="Gráfico mostrando crescimento de 20% nas vendas">

Imagem decorativa

Se a imagem for puramente decorativa, use alt="" para não poluir a leitura de tecnologias assistivas.

<img src="imagens/divisor-decorativo.svg" alt="">

3. Caminhos relativos e absolutos

Use caminhos relativos para imagens dentro do projeto e URLs absolutas para imagens externas.

<!-- Caminho relativo -->
<img src="imagens/projeto-final.webp" alt="Tela do projeto final" width="800" height="450">

<!-- URL absoluta -->
<img src="https://exemplo.com/imagem.jpg" alt="Imagem hospedada em site externo">

Nunca use:

C:\Users\helpdesk\Desktop\foto.jpg. Isso só funciona no seu computador e quebra no GitHub Pages.

4. width, height e estabilidade visual

Os atributos width e height ajudam o navegador a reservar espaço antes da imagem carregar, evitando que o layout fique pulando.

<img src="imagens/dashboard-html.webp"
     alt="Dashboard de estudos HTML5"
     width="800"
     height="450">

Não force dimensões que distorcem a imagem. Se a imagem original é horizontal, não tente transformar em quadrada apenas com HTML.

5. Formatos de imagem para web

JPG/JPEG: ideal para fotos e imagens com muitas cores.
PNG: ideal para imagens com transparência, logos e detalhes nítidos.
SVG: ideal para ícones, logos e ilustrações vetoriais.
WebP: formato moderno, leve e recomendado para performance.

6. Boas práticas para imagens

Use pasta dedicada, como imagens/ ou assets/.
Use nomes em minúsculas e com hifens.
Evite espaços, acentos e maiúsculas em nomes de arquivos.
Use alt descritivo em imagem informativa.
Use alt="" em imagem decorativa.
Comprima imagens antes de publicar.
Defina width e height quando possível.
Teste no navegador local e no GitHub Pages.

7. Desafio Mestre: Galeria de Imagens HTML Profissional

Crie o arquivo galeria-imagens-html.html com uma galeria profissional, acessível e organizada.

Requisitos obrigatórios

Doctype HTML5.
html lang="pt-BR".
Head completo com charset, viewport, title e meta description.
Body com header, main e footer.
H1 com “Galeria de Imagens HTML Profissional”.
Uma section introdutória explicando a importância das imagens.
Pelo menos 3 imagens informativas com src, alt, width e height.
Uma imagem decorativa com alt="" justificado.
Explicação clara da diferença entre src e alt.
Lista com pelo menos 5 boas práticas.
Footer com nome, ano e link para voltar ao topo.

Erros eliminatórios:

Imagem quebrada.
Imagem informativa sem alt.
alt genérico como “imagem”.
Nome de arquivo com espaço, acento ou maiúsculas inconsistentes.
src apontando para caminho local do computador.

8. Quiz com gabarito

Por que img é tag vazia? Porque não possui conteúdo interno nem fechamento.
Para que serve src? Para definir o caminho da imagem.
Para que serve alt? Para descrição alternativa e acessibilidade.
Quando usar alt=""? Em imagem puramente decorativa.
Por que definir width e height? Para estabilizar o layout.
Quando usar JPG? Em fotografias.
Quando usar PNG? Em imagens com transparência.
Quando usar SVG? Em ícones e vetores.
Quando usar WebP? Para performance moderna.
Por que evitar C:\Users? Porque quebra fora do computador local.
Como nomear imagens? Minúsculas com hifens.
Imagem pesada impacta o quê? Performance, experiência e SEO.
O que o navegador mostra se a imagem falhar? O texto alternativo.
Onde organizar imagens? Em pasta própria, como imagens/.
Nota da aula? 10/10 Mestre dos Mestres.

9. GitHub

git status
git add .
git commit -m "aula-18: cria galeria de imagens html"
git push