> ## Documentation Index
> Fetch the complete documentation index at: https://docs.openinary.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Transformations

> Common image recipes: thumbnails, avatars, banners, and format conversion

Put parameters after `/t/`, in any order, separated by commas.

```http theme={null}
GET /t/w_800,h_600,c_fill/photos/portrait.jpg
```

The full parameter table lives in the [API reference](https://docs.openinary.dev/api-reference/media/transform.md#image-parameters). This page is the shortest path to the things people actually build.

## Recipes

**A thumbnail that always has the same dimensions**

```http theme={null}
GET /t/w_400,h_300,c_fill/photo.jpg
```

`c_fill` crops the overflow, so every thumbnail comes out exactly 400x300 whatever the source ratio. Use `c_pad,b_rgb:f5f5f5` instead if you would rather letterbox than crop.

**An avatar cropped on the subject**

```http theme={null}
GET /t/w_400,h_400,c_fill,g_face/portrait.jpg
```

`g_face` picks the most visually salient region rather than the geometric center, which on a portrait is normally the face. Add `r_max` for a circle:

```http theme={null}
GET /t/w_400,h_400,c_fill,g_face,r_max,f_png/portrait.jpg
```

Rounded corners are cut to transparency, so pair them with `f_png`, `f_webp` or `f_avif`. On a solid background, `b_rgb:ffffff` fills the corners and lets you stay on JPEG.

**A banner at a fixed ratio**

```http theme={null}
GET /t/ar_16:9,w_1920/banner.jpg
```

`ar` crops to the ratio, `w` sets the size. You do not need `h`.

**The smallest file each browser can take**

```http theme={null}
GET /t/w_1200/photo.jpg
```

Request no format and Openinary serves AVIF, WebP or JPEG depending on what the browser accepts. See [automatic format selection](https://docs.openinary.dev/media-transformations/intelligent-compression.md).

**A specific format**

```http theme={null}
GET /t/w_1200,f_avif,q_80/photo.jpg
```

## Responsive images

Nothing special is required: build a `srcset` by varying `w`. Each width is rendered once and cached from then on.

```html theme={null}
<img
  src="https://media.example.com/t/w_800/photo.jpg"
  sizes="(max-width: 600px) 400px, 800px"
  alt=""
/>
```

## Related

> [card] [All image parameters](https://docs.openinary.dev/api-reference/media/transform.md#image-parameters)
>
> The full table: crop modes, gravity, corners, quality, formats.

> [card] [Automatic Format Selection](https://docs.openinary.dev/media-transformations/intelligent-compression.md)
>
> How the default format and quality are chosen.

> [card] [Upload & Cache Warming](https://docs.openinary.dev/media-transformations/upload-and-prewarm.md)
>
> Pre-generate variants so the first visitor hits a warm cache.

> [card] [Signed URLs](https://docs.openinary.dev/media-transformations/signed-urls.md)
>
> Restrict which transformations can be requested.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.