Transformações de imagem

O Fóir redimensiona e converte suas imagens. Um campo de imagem retorna uma URL para cada tamanho nomeado no formato que você pedir, e a imagem por trás de uma URL é produzida na primeira vez em que é solicitada.

Oito tamanhos nomeados

Os tamanhos são presets, nomeados pela largura da borda maior da imagem em pixels: thumbnail (160), small (640), medium (1024), large (1280), xlarge (1920) e três faixas maiores em 2560, 3840 e 5120. Uma origem menor que uma faixa não é ampliada para caber nela, e cada variante informa a largura e a altura com que foi renderizada.

Quatro formatos

WebP é o padrão, e AVIF, JPEG e PNG estão disponíveis. Você escolhe um na consulta com variants(format:). O formato faz parte da URL e não é negociado a partir do cabeçalho Accept do navegador, então cada URL tem uma única representação. O cliente de dados também coloca conjuntos WebP e AVIF no valor da imagem, e uma leitura pode preencher um elemento picture.

Renderizada na primeira requisição

A API entrega uma URL para cada tamanho e formato. A imagem é produzida quando sua URL é solicitada pela primeira vez e depois é servida do cache da CDN. As instruções viajam em um token que o Fóir emite, então parâmetros de largura e formato adicionados à mão a uma URL não são respeitados, e uma query string que o Fóir não reconhece retorna a imagem original.

Recortes e pontos focais

Um recorte é um retângulo em porcentagens com um ponto focal opcional, armazenado com a imagem onde ela é usada. Um arquivo da biblioteca de assets pode ser recortado de forma diferente em cada lugar em que aparece.

Placeholders

No upload, o Fóir calcula um blurhash e uma cor dominante para cada imagem. Um campo de imagem retorna os dois junto com a URL, as dimensões e o texto alternativo.

Leia os detalhes

A referência da API de mídia lista os presets, as opções de formato, os campos de recorte e o formato que um campo de imagem retorna.