Imgix Integration

Cachely has first-class support for Imgix. It proxies and caches your Imgix asset URLs and provides a response transformer that rewrites Imgix CDN URLs in your API responses.

Supported URL patterns

Imgix serves assets from your source domain, either the default *.imgix.net subdomain or a custom domain you've configured:

Standard source domain:

https://my-source.imgix.net/images/photo.jpg

With rendering parameters:

https://my-source.imgix.net/images/photo.jpg?w=800&h=600&fit=crop&auto=format

Custom subdomain:

https://images.your-site.com/images/photo.jpg?auto=format

These are rewritten to:

https://your-tenant.cachely.io/images/photo.jpg

Tenant setup

When creating your tenant, select Imgix as the CMS type and provide your Imgix source domain:

The origin is automatically configured from your source domain:

• Origin: https://my-source.imgix.net

If you use a custom subdomain (e.g. images.your-site.com) as your Imgix source, enter that as the Imgix domain instead.

Imgix Rendering API

Imgix applies image transformations via query parameters (e.g. ?w=800&h=600&fit=crop&auto=format). When assets are proxied through Cachely:

• The edge cache strips query parameters from the cache key for image types
• This means all transformation variants share the same cache entry
• If you rely on Imgix's rendering API for different sizes/crops, the first cached version will be served for all variants

If you need different image renditions, apply transformations on the client side or serve each variant from a different path.

Cachely SDK

Install the Cachely SDK to route Imgix asset requests through your edge domain:

npm install @cachely-io/sdk

Basic usage

Imgix is supported via the SDK's generic provider — point assetHosts at your Imgix source domain:

import { createGenericProvider, createCachelyFetch } from '@cachely-io/sdk'

const imgix = createGenericProvider({
  id: 'imgix',
  apiHosts: [],                                  // Imgix has no separate API host
  assetHosts: ['my-source.imgix.net'],           // your Imgix source domain
})

const cachelyFetch = createCachelyFetch({
  tenant: 'your-tenant',
  provider: imgix,
})

// Use as a drop-in fetch — Imgix asset URLs are rewritten automatically

Rewriting URLs without intercepting fetch

If you can't replace the fetch implementation, use createCachelyUrlRewriter:

import { createCachelyUrlRewriter, createGenericProvider } from '@cachely-io/sdk'

const imgix = createGenericProvider({
  id: 'imgix',
  apiHosts: [],
  assetHosts: ['my-source.imgix.net'],
})

const rewrite = createCachelyUrlRewriter({ tenant: 'your-tenant', provider: imgix })

const { url } = rewrite('https://my-source.imgix.net/photo.jpg?w=800&auto=format')
// → https://your-tenant.cachely.io/photo.jpg?w=800&auto=format

Imgix rendering parameters (?w=800&auto=format) are preserved end-to-end.

Advanced

For more control — disabling proxying selectively, classifying URLs by hand, registering custom providers — see the Cachely SDK reference.