# 4.4 Imagens

### 📘 Introdução ao HTML: Inserção de Imagens

As **imagens** são fundamentais no desenvolvimento de páginas web, pois tornam o conteúdo mais atrativo e informativo. No HTML, usamos a tag `<img>` para inserir imagens em uma página.

***

#### 🖼️ A Tag `<img>`

A tag `<img>` é usada para **exibir imagens**. Ela **não possui tag de fechamento** (é uma tag *autofechável*). Os principais atributos usados com essa tag são:

| Atributo | Função                              |
| -------- | ----------------------------------- |
| `src`    | Caminho da imagem (source)          |
| `alt`    | Texto alternativo (accessibilidade) |
| `width`  | Largura da imagem                   |
| `height` | Altura da imagem                    |

📌 *Exemplo básico*:

```html
<img src="gato.jpg" alt="Um gato deitado" width="300">
```

* **`src`** indica o nome ou o caminho do arquivo de imagem.
* **`alt`** é exibido caso a imagem não carregue e também é lido por leitores de tela.
* **`width`** e **`height`** podem ser definidos em pixels (`px`) ou porcentagem (`%`).

***

#### 🗂️ Caminhos para Imagens

Você pode usar:

* **Caminho relativo**: se a imagem estiver na mesma pasta do HTML

```html
<img src="logo.png" alt="Logo do site">
```

* **Caminho de subpasta**:

```html
htmlCopiarEditar<img src="imagens/banner.jpg" alt="Banner principal">
```

* **URL externa** (imagem da internet):

```html
<img src="https://exemplo.com/foto.jpg" alt="Foto online">
```

***

#### 🧩 Exemplo completo

```html
<h2>Galeria de animais</h2>
<img src="cachorro.jpg" alt="Cachorro feliz" width="200">
<img src="gato.jpg" alt="Gato observando" width="200">
<img src="passaro.jpg" alt="Pássaro colorido" width="200">
```

***

#### ♿ Importância do atributo `alt`

O atributo `alt` (texto alternativo):

* **Melhora a acessibilidade** para leitores de tela
* É exibido quando a imagem não carrega
* Ajuda no **SEO** (otimização para buscadores)

📌 *Exemplo com `alt`:*

```html
htmlCopiarEditar<img src="carro.jpg" alt="Carro vermelho em movimento">
```

***

#### ❌ O que evitar

* Usar imagens muito pesadas sem redimensionamento.
* Deixar de usar `alt`.
* Inserir imagens com caminhos incorretos.