Skip to main content

ClientLoader

Client Loader Functions are used to construct the URL for the Image and BaseImage components and the useResponsiveImage hook.

Using remixImageLoader enables Remix-Image’s advanced transformation options, which includes transformation caching and image operations such as resize, crop, rotate, blur, and flip.

However, using alternative (and likely paid) services and their client loaders may result in faster response times, as the Remix server will not be slowed down by requests for new image transformations.

We suggest trying the default remixImageLoader function to see if it works for your apps, and then upgrade to a paid alternative if needed. Only websites with high traffic and/or many dynamic image assets will need an alternative client loader.

Supported Loaders​

Remix Image Loader​

remixImageLoader is the default loader used by Remix-Image. In most cases you will want to use this loader.

Cloudflare Images Loader​

cloudflareImagesLoader is a loader used to transform images using the paid Cloudflare Images service.

Cloudinary Loader​

cloudinaryLoader is a loader used to transform images using the paid Cloudinary service.

Note: Remember to set loaderUrl to your API url! This should be a string similar to https://res.cloudinary.com/<cloud_name>/

Imgix Loader​

imgixLoader is a loader used to transform images using the paid Imgix service.

Note: Remember to set loaderUrl to your API url! This should be a string similar to https://<subdomain>.imgix.net/

Usage​

BaseImage and Image Components​

import { Image, remixImageLoader, cloudflareImagesLoader, cloudinaryLoader, imgixLoader } from "remix-image";

<Image
  loaderUrl="/api/image" // Required when using cloudinaryLoader or imgixLoader
  loader={remixImageLoader or cloudflareImagesLoader or cloudinaryLoader or imgixLoader}
  src="..."
  width="..."
  height="..."
  alt="..."
  responsive={[
    {
      size: {
        width: 100,
        height: 100,
      },
      maxWidth: 200,
    },
  ]}
/>

useResponsiveImage Hook​

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

const Image: React.FC<ImageProps> = ({
  className, 
  loaderUrl = "/api/image", // Required when using cloudinaryLoader or imgixLoader
  responsive = [],
  ...imgProps
}) => {
  const responsiveProps = useResponsiveImage(imgProps, responsive, [1], loaderUrl, remixImageLoader or cloudflareImagesLoader or cloudinaryLoader or imgixLoader);

  return (
    <img
      className={clsx(classes.root, className)}
      {...imgProps}
      {...responsiveProps}
    />
  );
};