imgproxy

@srcset/imgproxy

Adapter for imgproxy: srcset variant urls for content images, e.g. from an API or a CMS.

• 🌐 Runtime builder of loader-shaped srcset objects, isomorphic: browser and server
• 🔒 Presets support via the processing hook - no transformations exposed to the browser
• ✍️ Url signing on the server side
• 🛠 Passthrough mode for local development without a running imgproxy instance

Install

# pnpm
pnpm add @srcset/imgproxy @srcset/runtime
# yarn
yarn add @srcset/imgproxy @srcset/runtime
# npm
npm i @srcset/imgproxy @srcset/runtime

Usage

Srcset objects for CMS images:

import { Imgproxy } from '@srcset/imgproxy'

const imgproxy = new Imgproxy({ endpoint: 'https://imgproxy.example.com' })
const { src, srcSet, srcMap } = imgproxy.image(photo.url, {
  width: [600, 1200],
  format: ['webp', 'jpg']
})

Signed urls, on the server side:

import { sign } from '@srcset/imgproxy/sign'

const imgproxy = new Imgproxy({
  endpoint: 'https://imgproxy.example.com',
  signer: sign({ key, salt })
})

Passthrough mode - untouched source urls, e.g. for local development without a running imgproxy instance:

const imgproxy = new Imgproxy({
  endpoint: 'https://imgproxy.example.com',
  passthrough: import.meta.env.DEV
})

Documentation

For more details, guides and API references, check out the documentation website.