Introducing React Progressive Image

October 3, 2016

Progressive Image Loading Made Easy

Images can be big, and big can be bad on slow networks. Nobody wants to stare at whitespace while their network struggles to load your beautiful background image, so what can we do?

That’s where progressive image loading comes in. Progressive image loading can be the difference between a blank page and a smooth user experience. That’s why we made react-progressive-image, a small React component that lets you render a smaller or inlined version of your image, or a loading icon (or anything else!) while your actual image is loaded in the background.

react-progressive-image has a single export, ProgressiveImage, that takes a src and placeholder prop and asks that you provide a function as the only child. This function will be called with placeholder when the src image hasn’t loaded yet, and src when it has.

<ProgressiveImage src='beautiful-hero.jpg' placeholder='inlined-or-small-hero.jpg'> {(image) => <Hero src={image} />} </ProgressiveImage>

Requiring a function that takes the active image and returns the active children makes <ProgressiveImage/> extremely flexible.
You can render an <img/> directly, pass the active image to another component, use it as a backgroundImage, or anything else you
could possibly think of.

We hope this will make progressive easier for everyone, as a progressive user experience is a good user experience.

View the source code for React-Progressive-Image.

Related Posts

The Myth About Code Comments

February 28, 2024
Where to use them, when to use them, how to structure them, and how much detail should they have? These are the wrong questions: instead we should be asking ourselves, “should I even be writing a comment at all?”

Iterables in JS

July 12, 2022
A perhaps less well-known addition of the ES2015 spec is the addition of the iteration protocols. These protocols allow us JS developers to make use of iterables — a very powerful language feature that you’re likely already using in your day-to-day development, but maybe haven’t given too much thought to!

The Case for Consistent Documentation

April 21, 2021
Words can't begin to express the anxiety I felt leaving my first job last spring. As I put in my notice, a question kept nagging me: how could I wrap up two years in two weeks?