Aula 58 - Atributos da Tag IMG

Introdução

A tag <img> possui diversos atributos que controlam como uma imagem será exibida na página.

📌 Os atributos permitem definir localização, descrição, tamanho, carregamento e comportamento da imagem.

Sintaxe Básica

<img src="foto.jpg"
alt="Foto de exemplo">

Os atributos são adicionados dentro da própria tag.

Atributo SRC

O atributo src (source) informa o caminho da imagem.

<img src="imagens/logo.png">

Função	Descrição
src	Localização do arquivo da imagem.

Atributo ALT

O atributo alt fornece um texto alternativo para a imagem.

<img src="aluno.jpg"
alt="Foto do aluno">

O texto será exibido quando:

A imagem não carregar.
Leitores de tela forem utilizados.
Problemas de conexão ocorrerem.

Atributo WIDTH

Define a largura da imagem.

<img src="foto.jpg"
width="300">

Valor	Resultado
300	300 pixels de largura.
500	500 pixels de largura.

Atributo HEIGHT

Define a altura da imagem.

<img src="foto.jpg"
height="200">

⚠️ Alterar apenas altura ou largura pode deformar a imagem.

WIDTH e HEIGHT Juntos

<img src="foto.jpg"
width="400"
height="250">

Permite controlar exatamente o tamanho exibido.

Atributo TITLE

Exibe uma dica quando o usuário posiciona o mouse sobre a imagem.

<img src="logo.png"
title="Logo da Empresa">

Ao passar o mouse sobre a imagem, uma mensagem será exibida.

Atributo LOADING

Controla quando a imagem será carregada.

<img src="foto.jpg"
loading="lazy">

Valor	Função
lazy	Carrega apenas quando necessário.
eager	Carrega imediatamente.

📌 O uso de lazy loading melhora o desempenho do site.

Atributo STYLE

Permite aplicar estilos diretamente na imagem.

<img src="foto.jpg"
style="border-radius:10px;">

Apesar de funcionar, normalmente utilizamos CSS externo.

Exemplo Completo

<img
src="aluno.webp"
alt="Foto do aluno"
width="400"
height="250"
title="Aluno SENAI"
loading="lazy">

Acessibilidade

O atributo alt é um dos recursos mais importantes para acessibilidade.

Correto	Incorreto
alt="Aluno estudando HTML"	alt="imagem1"
alt="Logo da empresa"	alt=""

Boas Práticas

Sempre utilizar o atributo alt.
Otimizar imagens antes de publicar.
Utilizar loading="lazy" quando possível.
Evitar imagens excessivamente grandes.
Utilizar formatos modernos como WEBP.

Resumo dos Principais Atributos

Atributo	Função
src	Localização da imagem.
alt	Texto alternativo.
width	Largura.
height	Altura.
title	Dica ao passar o mouse.
loading	Controle de carregamento.

🖼️ Atributos da Tag IMG