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:

<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="…"
/>

• 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:

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.