Skip to main content

Remix-Image

👋 Intro

A React component for responsive images in Remix.

This library lets you:

  • Resize images to the minimum size needed for faster page loading
  • Convert images to more efficient file types for faster page loader
  • Apply transformations to images such as resize, crop, rotate, blur, and flip
  • Cache commonly requested assets for the best performance

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"
>

Where the responsive sizes provided through the props are turned into image URLs served by the local server that are cached for fast and performant loading.

🚀 How to use

Install

To install this library and its peer deps, use one of the following commands:

npm install -S remix-image @next-boost/hybrid-disk-cache
yarn add remix-image @next-boost/hybrid-disk-cache