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.