# FireImg image URL reference

FireImg serves optimized images from a CDN. You can use the image URL directly in an <img /> tag’s src attribute, or build URLs programmatically with @fireimg/js or @fireimg/react.

# URL structure

Use query-parameter URLs for optimized images:

https://img.fireimg.com/{project}/images/{imageKey}?width=800&quality=high&format=webp

The CDN normalizes supported query params into the canonical transform key before cache/origin lookup.

Base URL — Use https://img.fireimg.com for all image URLs. (https://i.fireimg.com and https://images.fireimg.com are equivalent aliases.)
— Your project slug (from the FireImg dashboard).
— The image path/key (for example hero.jpg or gallery/photo.png). A leading slash is optional.

# Parameters and aliases

Canonical parameter	Alias	Meaning
`width`	`w`	Output width in pixels (1–4000).
`height`	`h`	Output height in pixels (1–4000).
`quality`	`q`	`low`, `medium`, `high`, or a number `1`–`100`.
`position`	`pos`	Crop anchor for `fit=cover`: `center`, `top`, `bottom`, `left`, `right`.
`fit`	(none)	With both width and height: `fill`, `cover`, or `contain`.
`format`	`fmt`	`jpg`, `png`, `webp`, `avif`, or `auto`.
`fill`	(none)	Letterbox color for `fit=contain`: `transparent`, `#RGB`, or `#RRGGBB`.

Omit width and height to use the raw image dimensions (quality and format still apply).

# Using the URL in an `<img />` tag

<img
  src="https://img.fireimg.com/my-project/images/hero.jpg?width=800&quality=high&format=jpg"
  alt="Hero"
  width="800"
  height="450"
/>

Fixed width and format:

<img
  src="https://img.fireimg.com/my-project/images/photo.png?width=400&quality=medium&format=webp"
  alt="Photo"
  width="400"
/>

Thumbnail with both dimensions and cover fit:

<img
  src="https://img.fireimg.com/my-project/images/banner.jpg?w=300&h=200&q=medium&format=jpg&fit=cover&position=center"
  alt="Banner thumbnail"
  width="300"
  height="200"
/>

Responsive image with srcset (multiple widths):

<img
  src="https://img.fireimg.com/my-project/images/hero.jpg?width=800&quality=medium&format=jpg"
  srcset="
    https://img.fireimg.com/my-project/images/hero.jpg?width=400&quality=medium&format=jpg 400w,
    https://img.fireimg.com/my-project/images/hero.jpg?width=800&quality=medium&format=jpg 800w,
    https://img.fireimg.com/my-project/images/hero.jpg?width=1200&quality=medium&format=jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Hero"
/>

# Building URLs in code

For dynamic or responsive URLs, use the npm packages so tokens and order stay consistent with the CDN:

JavaScript / TypeScript (@fireimg/js):

import { createFireimg } from '@fireimg/js';

const fireimg = createFireimg({ project: 'my-project' });

const url = fireimg.getUrl('hero.jpg', { width: 800, quality: 'high' });
const srcset = fireimg.getSrcSet('hero.jpg', { minWidth: 400, maxWidth: 1200, snapStep: 200 });

React (@fireimg/react):

import { FireImg } from '@fireimg/react';
import { configureFireimg } from '@fireimg/react';
configureFireimg({ project: 'my-project' });

<FireImg imageKey="hero.jpg" width={800} quality="high" alt="Hero" />

See @fireimg/js and @fireimg/react for full options and installation.

# FireImg image URL reference

# URL structure

# Parameters and aliases

# Using the URL in an <img /> tag

# Building URLs in code

# Using the URL in an `<img />` tag