Imagens

Markdown para LLMs (em inglês)llms.txt

Uma imagem no Folio é escrita como no Markdown: ![descrição](endereço). O endereço pode ser uma imagem enviada ao projeto ou um link https://.

Enviando imagens

Com uma apresentação aberta, você pode enviar imagens de três formas:

Botão de imagem: clique no ícone Inserir imagem, no topo do editor, e escolha um ou mais arquivos.
Arrastar e soltar: arraste o arquivo para dentro do editor, na linha em que a imagem deve entrar.
Colar: copie uma imagem (de um print ou de outro programa) e cole no editor com Ctrl+V (Cmd+V no Mac).

Enquanto o arquivo é enviado, o editor mostra uma linha provisória com Enviando nome-do-arquivo…. Quando o envio termina, ela é trocada pela referência da imagem:

![grafico-vendas](asset:3f2b8c1e-7a4d-4e9b-9c2a-1d5e6f7a8b9c)

A descrição entre colchetes vem do nome do arquivo, sem a extensão. Troque-a por um texto que descreva a imagem.

Regra	Valor
Formatos aceitos	PNG, JPEG, GIF e WebP
Tamanho máximo	5 MB por imagem

Se o arquivo não for aceito, a linha provisória é removida e uma mensagem explica o motivo.

Imagens externas

Também é possível usar uma imagem publicada na internet, com um endereço que comece com https://:

# Nosso escritório
![Montanhas ao amanhecer](https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200){h=640 radius=lg}

Ajustando a imagem

Uma imagem sozinha numa linha é um bloco. Os atributos vão entre chaves, logo depois do endereço:

Atributo	O que faz
`fit=contain`	Mostra a imagem inteira dentro da área. É o padrão.
`fit=cover`	Preenche toda a área, cortando as bordas se for preciso.
`w`, `h`	Largura e altura, em pixels (`480`), porcentagem (`50%`) ou `full`.
`radius`	Arredonda os cantos: `sm`, `md`, `lg` ou pixels.
`shadow`	Sombra: `sm`, `md`, `lg` ou `none`. Sozinho, vale `md`.
`border`	Borda, como `border="4 accent"`.
`opacity`	Transparência, de `0` a `1` ou em porcentagem.

O fit só faz diferença quando a área tem proporção diferente da imagem, por exemplo quando você define w e h ao mesmo tempo:

::: columns {gap=lg}
![Paisagem inteira](https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200){fit=contain h=560}
![Paisagem recortada](https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200){fit=cover h=560 radius=lg shadow}
:::

Para colocar texto ao lado da imagem, use colunas. Veja Layouts.

Imagens no meio do texto

Uma imagem dentro de um parágrafo acompanha o texto e tem a altura da letra. Os atributos vão colados, sem espaço:

# Parceiros
Apoio: ![logotipo](https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200){radius=sm} Fundação Horizonte {size=2xl}

Para mudar o tamanho, mude o size do parágrafo ou use h na imagem.

Imagens de fundo

O atributo image coloca uma imagem no fundo de um slide ou de um bloco. Ela cobre toda a área e fica centralizada:

--- {image=https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200 color=white align=center}
::: box {bg=ink/60 pad=xl radius=lg}
# Planejamento 2027 {size=5xl}
Encontro anual de liderança {.lead}
:::

image aceita os mesmos endereços que as imagens comuns: https:// ou uma imagem enviada (image=asset:…).

--- {image=asset:3f2b8c1e-7a4d-4e9b-9c2a-1d5e6f7a8b9c}
::: box {image=asset:3f2b8c1e-7a4d-4e9b-9c2a-1d5e6f7a8b9c h=400 radius=lg}
:::

Privacidade

Imagens enviadas são servidas por um endereço longo e aleatório, para que possam aparecer na apresentação sem login. Elas não aparecem em buscas nem em listas públicas, mas qualquer pessoa que tiver o endereço consegue abrir a imagem. Não envie imagens com informações sensíveis.

Erros comuns

Código	Quando acontece
F301	Endereço não permitido: não começa com `https://` nem é uma imagem enviada (`asset:` seguido do identificador).
F301	`fit` com um valor diferente de `cover` ou `contain`.
F209	Atributo desconhecido na imagem, como `fitt`.