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:

```typescript jsx

Into:

```typescript jsx
<img
  src="https://github.com/Josh-McFarlin/remix-image/raw/v1.4.0/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

Docs

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