Skip to main content


Optionally, this library also exports the hook used to generate responsive props for images. In most use cases you can simply use the Image component, but you might need the hook for custom components.

import { useResponsiveImage, remixImageLoader } from "remix-image";

const Image: React.FC<ImageProps> = ({
loaderUrl = "/api/image",
responsive = [],
}) => {
const responsiveProps = useResponsiveImage(imgProps, responsive, [1], loaderUrl, remixImageLoader);

return (
className={clsx(classes.root, className)}


imgProps{ src: string }YesThe props to be passed to the base img element.
responsive{ size: { width: number; height: number; }; maxWidth?: number; }[][]An array of responsive sizes.
optionsTransformOptionsTransformOptions that can be used to override the defaults provided to the loader.
dprVariantsnumber or number[][1]Different DPR variants to generate images for. This value will always be merged into an array with value [1].
loaderUrlstringYes when using cloudinaryLoader or imgixLoader for loader parameter"/api/image"The path of the image loader resource route.
loaderClientLoaderremixImageLoaderThe ClientLoader to use for generating the transformed image.

ClientLoader Options

By default, remixImageLoader is used. If you would like to use an external ClientLoader, please refer to the ClientLoader documentation.


export interface TransformOptions {
/** Width of resulting image. */
width: number;
/** Height of resulting image. If width is present, this take priority. */
height?: number;
/** The content type of the resulting image. (optional, default source type) */
contentType?: MimeType;
/** How the image should be resized to fit both provided dimensions. (optional, default 'contain') */
fit?: ImageFit;
/** Position to use when fit is cover or contain. (optional, default 'center') */
position?: ImagePosition | string | number;
/** Background color of resulting image. (optional, default [0x00, 0x00, 0x00, 0x00]) */
background?: Color;
/** Quality, integer 1-100. (optional, default 80) */
quality?: number;
/** zlib compression level, 0-9. (optional, default 9) */
compressionLevel?: number;
/** Number of animation iterations, use 0 for infinite animation. (optional, default 0) */
loop?: number;
/** Delay between animation frames (in milliseconds). (optional, default 100) */
delay?: number;
/** The number of pixels to blur the image by. (optional, default null) */
blurRadius?: number | null;
/** The number of degrees to rotate the image by. (optional, default null) */
rotate?: number | null;
/** The direction to mirror the image by. (optional, default null) */
flip?: FlipDirection | null;
/** The location to crop the source image before any other operations are applied. (optional, default null) */
crop?: CropOptions | null;