@udisc/remix-image

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 @udisc/hybrid-disk-cache
yarn add remix-image @udisc/hybrid-disk-cache

Docs

• Documentation for this library can be found at: https://remix-image.mcfarl.in
• Several examples can be found in examples/