# @udisc/remix-image

> A React component for responsive images in Remix

Latest version **1.6.0** (published 2025-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @udisc/remix-image
pnpm add @udisc/remix-image
yarn add @udisc/remix-image
bun add @udisc/remix-image
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2025-01-27 |
| First published | 2023-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 338 |
| Author | Josh McFarlin |
| Maintainers | smerchek |
| Keywords | react, remix, image, responsive |

## Links

- npm: https://www.npmjs.com/package/@udisc/remix-image
- Repository: https://github.com/Josh-McFarlin/remix-image
- Homepage: https://remix-image.mcfarl.in
- Issues: https://github.com/Josh-McFarlin/remix-image/issues
- npm.io page: https://npm.io/package/@udisc/remix-image

## Dependencies (5)

- [clsx](https://npm.io/package/clsx.md) ^1.2.1
- [is-svg](https://npm.io/package/is-svg.md) ^4.3.2
- [lru-cache](https://npm.io/package/lru-cache.md) ^7.14.0
- [js-image-lib](https://npm.io/package/js-image-lib.md) ^1.0.1
- [query-string](https://npm.io/package/query-string.md) ^7.1.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.6.0 (latest) — 2025-01-27
- 1.5.0 — 2023-10-25

## README

# Remix-Image

![](https://badgen.net/npm/v/remix-image)
![](https://badgen.net/npm/license/remix-image)
![](https://badgen.net/npm/types/remix-image)
![](https://badgen.net/bundlephobia/min/remix-image)
![](https://badgen.net/npm/dt/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
<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:

```typescript jsx
<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:
```bash
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](https://remix-image.mcfarl.in)
- Several examples can be found in [examples/](../../examples/)

---
_Source: https://npm.io/package/@udisc/remix-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._