# Imagens — Otimização para PageSpeed

---

## LCP Image (a imagem mais importante)

O LCP element é o maior elemento visível no viewport. Se for uma imagem:

```html
<!-- ✅ LCP image: fetchpriority high + NUNCA lazy -->
<img src="hero.webp"
     width="800" height="600"
     fetchpriority="high"
     decoding="async"
     alt="Descrição da imagem">
```

**Nunca colocar `loading="lazy"` na imagem LCP** — isso instrui o browser a atrasar o carregamento, aumentando LCP diretamente.

---

## Imagens abaixo do fold

```html
<!-- ✅ Below-fold: lazy + async -->
<img src="mentor.webp"
     width="340" height="400"
     loading="lazy"
     decoding="async"
     alt="Nome do mentor">
```

---

## `srcset` + `sizes` para responsividade real

```html
<img
    src="https://res.cloudinary.com/dozxsfkmm/image/upload/f_webp,q_auto:good,w_400,c_fill,g_face/pasta/img.jpg"
    srcset="
        https://res.cloudinary.com/dozxsfkmm/image/upload/f_webp,q_auto:good,w_400,c_fill,g_face/pasta/img.jpg 400w,
        https://res.cloudinary.com/dozxsfkmm/image/upload/f_webp,q_auto:good,w_800,c_fill,g_face/pasta/img.jpg 800w
    "
    sizes="(max-width: 767px) 100vw, 400px"
    width="400"
    height="400"
    loading="lazy"
    decoding="async"
    alt="Descrição">
```

O browser escolhe automaticamente o tamanho ideal baseado no viewport e densidade de pixels.

---

## Cloudinary — Transformações essenciais

**URL base**: `https://res.cloudinary.com/dozxsfkmm/image/upload/`

| Transformação | Parâmetro | Quando usar |
|--------------|-----------|-------------|
| Formato WebP | `f_webp` | Sempre — reduz 30-40% vs JPEG |
| Qualidade automática | `q_auto:good` | Sempre — Cloudinary escolhe o melhor trade-off |
| Redimensionar | `w_400` | Sempre — nunca servir maior que o espaço visual |
| Crop centrado | `c_fill` | Para crops de proporção fixa |
| Detectar face | `g_face` | Para fotos de pessoas — centra no rosto |

**Exemplo completo para foto de mentor (340px desktop, 100vw mobile):**
```
f_webp,q_auto:good,w_400,c_fill,g_face  → mobile
f_webp,q_auto:good,w_680,c_fill,g_face  → desktop 2x
```

---

## `width` e `height` — obrigatório para evitar CLS

O browser usa `width` e `height` para reservar o espaço antes de a imagem carregar, evitando que o layout "pule" quando ela aparece.

```html
<!-- ❌ Sem dimensões — CLS quando carrega -->
<img src="foto.jpg" class="foto">

<!-- ✅ Com dimensões — browser reserva o espaço -->
<img src="foto.jpg" class="foto" width="340" height="400">
```

As dimensões devem ser as **dimensões naturais** da imagem (ou proporção real). O CSS pode redimensionar livremente.

---

## Formatos por tipo de conteúdo

| Tipo | Formato recomendado | Cloudinary param |
|------|--------------------|--------------------|
| Fotos (pessoas, lugares) | WebP | `f_webp` |
| Ilustrações com transparência | WebP | `f_webp` |
| Logos vetoriais | SVG inline ou WebP | `f_webp` se raster |
| Ícones | SVG inline | — |
| Favicons | SVG inline (data URI) | — |

---

## Checklist de imagens

- [ ] Todas as imagens em WebP (Cloudinary: `f_webp`)
- [ ] Qualidade automática (`q_auto:good`)
- [ ] `width` e `height` explícitos em todas as imagens
- [ ] LCP image: `fetchpriority="high"` + sem `loading="lazy"`
- [ ] Below-fold images: `loading="lazy"` + `decoding="async"`
- [ ] `srcset` + `sizes` para imagens responsivas
- [ ] Nenhuma imagem servida maior que o tamanho visual (Cloudinary: `w_N`)
- [ ] `alt` descritivo em todas as imagens (acessibilidade + SEO)
