# Imagem com legenda (`imagem`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Imagem responsiva com proporção fixa opcional, cantos e sombra do DS e legenda.

- **Categoria:** Básicos
- **Equivalente no Elementor:** Imagem (Image)
- **Arquivos:** `imagem.html`, `imagem.css`
- **Precisa de JavaScript:** não

## Quando usar
- Foto do produto, do autor, do ambiente ou de bastidor
- Ilustração ao lado de texto (dentro de uma grade)

## Quando não usar
- Para o logo (o logo entra como arquivo original, sem corte nem proporção forçada)
- Para várias fotos navegáveis (use galeria ou carrossel)

## Variações
- **Proporção 16:9, 4:5 ou 1:1:** classe ds-imagem--16x9, ds-imagem--4x5 ou ds-imagem--1x1 (corta para caber)
- **Proporção original:** sem classe de proporção
- **Com sombra:** classe ds-imagem--sombra
- **Com moldura:** classe ds-imagem--moldura
- **Sem canto arredondado:** classe ds-imagem--reta

## Conteúdo esperado
- Arquivo da imagem (prefira WebP ou JPG comprimido, até uns 200 KB)
- Texto alternativo
- Legenda opcional
- width e height reais do arquivo

## Acessibilidade
- alt descreve a imagem; alt="" quando for só enfeite
- Legenda em <figcaption>, ligada à imagem pelo <figure>
- loading="lazy" fora do topo da página; no topo use fetchpriority="high"

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/imagem/imagem.css">
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-cor-borda`, `--ds-cor-superficie`, `--ds-cor-texto-suave`, `--ds-espaco-2`, `--ds-raio-lg`, `--ds-sombra-md`, `--ds-tamanho-pequeno`.

## Notas

Proporção com corte usa object-fit: cover. Se a imagem tiver texto ou rosto perto da borda, use a proporção original.