Image transformations

Fóir resizes and converts your images. An image field returns a URL for each named size in the format you ask for, and the image behind a URL is produced the first time it is requested.

Eight named sizes

Sizes are presets, named by the width of the image's long edge in pixels: thumbnail (160), small (640), medium (1024), large (1280), xlarge (1920) and three larger tiers at 2560, 3840 and 5120. A source smaller than a tier is not enlarged to fit it, and each variant reports the width and height it was rendered at.

Four formats

WebP is the default, and AVIF, JPEG and PNG are available. You pick one in the query with variants(format:). The format is part of the URL and is not negotiated from the browser's Accept header, so each URL has one representation. The data client also puts WebP and AVIF sets on the image value, and one read can fill a picture element.

Rendered on first request

The API hands out a URL for each size and format. The image is produced when its URL is first requested and served from the CDN's cache after that. The instructions travel in a token that Fóir issues, so width and format parameters added to a URL by hand are not honoured, and a query Fóir does not recognise returns the original image.

Crops and focal points

A crop is a rectangle in percentages with an optional focal point, stored with the image where it is used. One file from the asset library can be cropped differently in each place it appears.

Placeholders

At upload Fóir computes a blurhash and a dominant colour for each image. An image field returns both with the URL, the dimensions and the alt text.

Read the detail

The media API reference lists the presets, the format options, the crop fields and the shape an image field returns.