Skip to main content

Creating a Transformer

You may want to create a Transformer if you want to modify images in a way that is not currently supported by this library. An example could be resizing images using Cloudinary or Cloudflare Images.


To make your own, just make a class that follows the Transformer format:

export type Transformer = {
name: string;
supportedInputs: Set<MimeType>;
supportedOutputs: Set<MimeType>;
fallbackOutput: MimeType;
transform: (
input: {
url: string;
data: Uint8Array;
contentType: MimeType;
output: TransformOptions
) => Promise<Uint8Array>;

You will then provide this object to the transformer field of the ‘loader’ config

import type { LoaderFunction } from "remix";
import { imageLoader } from "remix-image/server";
import myTransformer from "...";

const config = {
selfUrl: "http://localhost:3000",
whitelistedDomains: [""],
transformer: myTransformer,

export const loader: LoaderFunction = ({ request }) => {
return imageLoader(config, request);


Show Off

Create something cool that you think others would use? Upload it to GitHub and show it off on the Remix-Image repo!