# Images (/docs/api/images)

Add a query to an image asset's `url` for a resized, re-encoded copy (the delivery URL already names `w` and `q`; swap them for what a layout needs). Without `w` or `h` an image is served at its own width, up to 3840 pixels:

```html
<img
	src="https://content.obelism.studio/assets/asset_…/photo.jpg?w=800&q=80"
	srcset="…/photo.jpg?w=480&q=80 480w, …/photo.jpg?w=960&q=80 960w"
	sizes="(min-width: 60rem) 50vw, 100vw"
	width="1600"
	height="900"
	alt="…"
/>
```

| Parameter | Value                                                                                     |
| --------- | ----------------------------------------------------------------------------------------- |
| `w`, `h`  | Pixels, up to 3840                                                                        |
| `fit`     | `scale-down` (default), `contain`, `cover`, `crop`, `pad`                                 |
| `format`  | `auto` (default: AVIF or WebP when the browser takes them), `avif`, `webp`, `jpeg`, `png` |
| `q`       | Quality, 1–100 (default 80)                                                               |
| `focus`   | With `cover` or `crop`: `x,y` (0–1 from the top left) to keep in view, or `auto`          |

- PNG, JPEG, GIF and WebP can be transformed; other files, AVIF uploads included, ignore the query and are served as they are.
- Assets carry their `width` and `height`, for the `width` and `height` attributes, so the page doesn't shift as images load.
- `format=auto` picks AVIF for images up to 1200 pixels on their longest side and WebP up to 2400, the sizes Cloudflare can encode them at quickly. Larger copies, such as a 2x hero at 3840, keep the source's format. An explicit `format` is used as asked; Cloudflare falls back to WebP or JPEG when an image is too large for AVIF.
- Copies are cached like the originals: public, for a year. They ignore `Range`. The edge keeps one copy per width, quality and `Accept` for a day, answered with `X-Cache: HIT`; `cf-cache-status` is Cloudflare's separate front cache and says `BYPASS` for a Worker response either way, so it isn't the sign of a miss.
- `q=80` is the default, and what delivery names. Re-encoding at `q=100` can produce a copy several times the original file's size; ask for it only when the image really needs it.
- An image's **focal point** (set by clicking the image in its details, in the **Media** library or on a picked file in the entry form) comes with the asset as `focalPoint: { x, y }`. Pass it as `focus` when you crop: since it is part of the URL, moving it gives new URLs instead of a year-cached old crop. The SDK's `imageUrl` and `imageSrcSet` add it for `cover` and `crop` (`@obelism/content` 0.9.0 and later).

With the SDK:

```ts
import { imageSrcSet, imageUrl } from '@obelism/content'

const src = imageUrl(asset, { w: 960 })
const srcSet = imageSrcSet(asset, [480, 960, 1440], { format: 'auto' })
```

In Next.js, allow `https://content.obelism.studio/assets/**` in `images.remotePatterns` to use `next/image`, or pass these URLs to a plain `<img>` and skip Next's optimizer. In a React Router or Hydrogen storefront, use a plain `<img>` with the `srcset` above: Hydrogen's `<Image>` only transforms Shopify CDN URLs with its default loader.