React Image Loader

tools

High-performance image loading library with Intersection Observer-based lazy loading, progressive blur-up placeholders, graceful error fallbacks, and automatic WebP format detection.

React.jsJavaScript

next/image, but pluggable into any React app — and free.

The problem

Outside of Next.js, image loading in React is a graveyard of half-baked libraries. They either don't lazy-load properly, skip WebP detection, or have no placeholder strategy. I wanted a small drop-in that does all three correctly.

The approach

Wrote a single component with three independent concerns: Intersection Observer for lazy mount, a blur-up placeholder driven by a low-res data URI, and automatic WebP format detection with a JPEG fallback. Each concern can be disabled if the consumer wants to manage it. Zero dependencies, ESM + CJS builds.

Tech decisions

Intersection Observer

Native, performant, no scroll-listener thrash; respects rootMargin

Blur-up placeholder

Perceived performance — image area never collapses, blur fades to sharp

WebP feature detection

30–40% smaller payloads on supporting browsers; graceful fallback elsewhere

Zero deps

Library code that adds 50KB of deps to consumers is anti-social

Outcomes

Drop-in <Image /> component with prop-driven behavior
Lazy mount only when within viewport rootMargin
Automatic WebP serving with JPEG fallback
Graceful error fallbacks for broken sources

What I learned

Library design is a constant fight against the urge to add features. The right move is usually to expose the primitive and let consumers compose, not to ship Yet Another Prop.