Imagens HTML

Os favoritos fazem você pular pelo texto. As imagens trazem fotos, diagramas e logotipos para a página. A ferramenta HTML básica é o elemento vazio img: no uso normal, ele não envolve uma legenda entre tags de abertura e fechamento. Aponta para um arquivo com src e oferece uma alternativa textual com alt.

O que img faz

img é um elemento substituído. O navegador busca o recurso em src e o desenha no layout. Se o arquivo estiver ausente ou bloqueado, os visitantes ainda precisam de um alt útil (ou, para pura decoração, um alt="" explicitamente vazio). Os caminhos seguem as mesmas regras relativas e absolutas que você já usa para links e favicons.

Resposta direta

Escreva <img src="path/to/file.jpg" alt="short description">.

• src — onde está o arquivo de imagem
• alt — alternativa textual quando a imagem não pode ser vista ou falha ao carregar
  width e height opcionais podem reservar espaço e reduzir saltos de layout. Prefira comprimir fotos grandes demais em vez de enviar arquivos de vários megabytes a cada aluno em uma conexão lenta.

Atributos principais em um relance

Uma imagem informativa básica

Coloque as imagens em uma pasta clara como images/ e descreva o que importa em alt.

Lendo o exemplo básico

• src="images/team.jpg" é um caminho relativo a partir do arquivo HTML
• alt explica o significado da foto para leitores de tela e cargas falhas
• Não há um </img> de fechamento separado na escrita HTML normal — os atributos ficam na tag única
• Se a pasta ou o nome do arquivo estiver errado, a imagem quebra mesmo quando a tag parece perfeita

Dicas de width e height

Dar width e height ajuda o navegador a reservar espaço antes de os bytes chegarem. Combine a proporção do arquivo real quando puder, para que a imagem não pareça esticada. Encolher uma foto enorme só com atributos HTML ainda baixa o arquivo enorme — redimensione e comprima os assets para a web.

Imagens decorativas e alt vazio

Quando uma imagem não adiciona informação — um ornamento puramente decorativo já coberto pelo texto próximo — use alt="". Não omita o atributo. Omitir alt e escrever alt="" vazio são diferentes: vazio significa “ignore-me nas árvores de acessibilidade”; ausente muitas vezes significa “algo deu errado na marcação”.

Escreva alt para significado, não para spam

Um bom alt é um substituto curto da imagem no contexto: o que um usuário vidente precisaria para entender a página. Um alt ruim enche de palavras-chave, repete uma legenda já impressa ao lado da imagem ou diz “image” sem conteúdo. Se a imagem for um gráfico, resuma a conclusão; se for um logotipo que também age como link da home, o nome acessível do link costuma vir do alt da imagem ou do texto ao redor — mantenha-o honesto.

Formatos de arquivo que iniciantes encontram

JPEG (.jpg) serve para fotos. PNG serve para gráficos com bordas nítidas ou transparência. SVG serve para ícones e logotipos simples quando você quer escala nítida (você verá mais padrões SVG depois). Escolha um formato que combine com o conteúdo e depois mantenha o peso do arquivo razoável.

Pratique no seu editor

1. Coloque um .jpg ou .png pequeno em uma pasta images.
2. Adicione um img com src relativo correto e alt claro.
3. Adicione width e height que combinem com a proporção.
4. Quebre o caminho de propósito uma vez — confirme que alt (ou a UI de imagem quebrada) ajuda a notar o erro e depois corrija o caminho.
5. Adicione uma imagem decorativa com alt="" e confirme que você não apagou o atributo por completo.

Erros fáceis

• Faltar alt em imagens informativas
• Pasta ou ortografia errada em src
• Enviar uma foto de câmera de vários megabytes quando um arquivo menor para web bastaria
• Tratar alt como depósito de palavras-chave
• Esticar logotipos com width/height incompatíveis
• Confundir src (imagens) com href (links)

Resumo

• Imagens usam img com src e alt
• Os caminhos seguem as mesmas regras dos outros arquivos do site
• alt apoia acessibilidade e cargas falhas; use alt="" só para pura decoração
• Width e height podem reservar espaço; ainda assim otimize o tamanho real do arquivo
• Escolha um formato sensato e mantenha os downloads leves