Every image object includes a url property, which returns a direct URL to the image. You can customize the size and format of each image by adding specific query parameters to this URL. Below are the supported parameters and examples of their usage.

Resizing

You can resize an image by specifying one or both of the following parameters:

  • w: (width): Sets the output width (in pixels).
  • h: (height): Sets the output height (in pixels).

When you provide both w and h, the image is fit within those dimensions while preserving its aspect ratio.

By default, the URL for each image may already include query parameters for width (w) and height (h). These default values ensure a certain size is always delivered unless you override them. You can modify or remove these parameters to fetch different sizes or the original image.

const imageUrl = new URL(image.url)

// Default size
imageUrl.toString() # 'https://assets.lummi.ai/assets/abc123?w=xxx&h=xxx'

// Original size
imageUrl.searchParams.delete('w')
imageUrl.searchParams.delete('h')
imageUrl.toString() # 'https://assets.lummi.ai/assets/abc123'

// Resize to a width of 400px
imageUrl.searchParams.set('w', '400')
imageUrl.searchParams.delete('h')
imageUrl.toString() // 'https://assets.lummi.ai/assets/abc123?w=400'

// Resize to a height of 300px
imageUrl.searchParams.set('h', '300')
imageUrl.searchParams.delete('w')
imageUrl.toString() // 'https://assets.lummi.ai/assets/abc123?h=300'

// Resize to both width 400px and height 300px (maintains aspect ratio)
imageUrl.searchParams.set('w', '400')
imageUrl.searchParams.set('h', '300')
imageUrl.toString() // 'https://assets.lummi.ai/assets/abc123?w=400&h=300'

Format Conversion

You can also convert an image from its original format to a different format by adding the fm parameter. Supported values include jpg, png, and avif.

const imageUrl = new URL(image.url)

imageUrl.searchParams.set('fm', 'png')
imageUrl.toString() // 'https://assets.lummi.ai/assets/abc123?fm=png&w=xxx&h=xxx'

Combining Parameters

const imageUrl = new URL(image.url)

imageUrl.searchParams.set('fm', 'avif')
imageUrl.searchParams.set('w', '400')
imageUrl.searchParams.set('h', '300')

imageUrl.toString() // 'https://assets.lummi.ai/assets/abc123?fm=avif&w=400&h=300'