Remix / React Router | Keenpix image CDN docs

Optimize responsive images in Remix and React Router with Keenpix URL helpers and native image markup.

Remix (and React Router v7) has no image component, so use the universal helper with a native <img> — or the same <KeenpixImage> from the React guide.

import { keenpix, keenpixSrcSet } from '~/lib/keenpix'

export default function Hero() {
  const src = 'https://cdn.example.com/hero.jpg'
  return (
    <img
      alt="Hero"
      decoding="async"
      loading="lazy"
      sizes="100vw"
      src={keenpix(src, { w: 1280, fmt: 'auto' })}
      srcSet={keenpixSrcSet(src)}
    />
  )
}

Expose the host/project to the client via Remix's window.ENV pattern (a loader + a <script> in root.tsx), then read them in keenpix.ts.