Reshoot

Reshoot is a JavaScript library that makes rendering responsive and lazy-loaded images effortless and without overhead.

Problem

Getting responsive image loading right is hard. Only the image in the right dimension should be downloaded by the browser to save bandwidth. A preview placeholder should be shown before the completion of download to improve user experience. Moreover, cross-browser compatibility and error handling is non-trivial to cater for.

Introduction

Reshoot is a production-ready image framework for React. As a spiritual successor of react-ideal-image (no longer actively maintained), Reshoot makes the generation and rendering of lazy-loaded responsive images as effortless and efficient as possible.

It is not just a library but a framework, because apart from a lightweight React component library, it is also shipped with a Webpack loader and a Babel macro that generate images in different sizes (srcset) as well as low-quality previews (lqip).

Written in TypeScript, Reshoot provides type definitions out of the box. Powered by hooks and IntersectionObserver, its React runtime is only 4.4kb in size (3kb js and 1.4kb css) before gzip and 2.5kb after gzip. The built-in Babel macro also helps you override image generation setting while maintaining maximum code readability and type-checkability. The project has a test coverage of over 90%.

Quick Look

Here is a simplfied demonstration on how easy to use Reshoot.

import React from 'react';
import reshoot from '@reshoot/macro';
import { Reshoot } from '@reshoot/react';

function Example() {
  return <Reshoot data={reshoot('./image.jpg')} />;
}

Check out the project's homepage or GitHub repo for more information.