Remix-Image

What

Remix Image Supports:

Format Conversion: Convert your large png images into more efficient file formats like webp
Image Resizing: Resize your 1600x1600 px image into a 200x200 px image to load much faster when a large image is not needed
Image Transformations: Apply image transformations such as resize, crop, rotate, blur, and flip

Turning

<Image
  src="https://i.imgur.com/5cQnAQC.png"
  responsive={[
    {
      size: { width: 100, height: 100 },
      maxWidth: 500,
    },
    {
      size: { width: 600, height: 600 },
    },
  ]}
  dprVariants={[1, 3]}
/>

Into

<img
  src="/api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=600&height=600"
  srcset="/api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=100&height=100 100w, /api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=600&height=600 600w, /api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=300&height=300 300w, /api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=1800&height=1800 1800w"
  sizes="(max-width: 500px) 100px, 600px"
>

Remix-Image turns the responsive sizes provided through the props into image URLs served by the Remix server. This enables sending the smallest images possible to the client, allowing pages to load much faster.

Why

Optimize Performance

Remix-Image will automatically create dynamic images on demand and cache them for the best performance. You can serve images to your users in the most efficient file formats to improve page loads and save bandwidth.

Save Time

Setup the library once and Remix-Image will automatically create dynamic images on demand and cache them for the best performance. You will longer need to manually convert and compress your images every time you make changes.

Save Money

Remix-Image runs as a Loader Function in your existing Remix server. This means you do not have to setup additional servers for image transformation or pay for services such as Cloudinary.