Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @cloudpower97/react-progressive-picture with all npm packages installed. Try it out:

var reactProgressivePicture = require("@cloudpower97/react-progressive-picture")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@cloudpower97/react-progressive-picture v1.2.0

A simple React picture component to progressively load images using various effects.

React Progressive Picture

made-for-react code style: prettier GitHub release GitHub contributors PRs Welcome License: MIT

Build Status Codacy Badge Codacy Badge

Table of Contents


React Progressive Picture

React Progressive Picture is the right way to handle the lazy loading of your img or picture element inside a React application.

It's highly customizable, support different placeholder based on sources, advanced CSS filter effects and a lot more to make your design just the way you want it!


npm i @cloudpower97/react-progressive-picture


yarn add @cloudpower97/react-progressive-picture

You also want to add the intersection-observer and/or picturefill polyfill for full browser support. Check out adding the polyfill for details about how you can include it.

Why use this component?

There are already some component out there that you can use to lazyload images OR to support the latest <picture> specification.

React Progressive Picture itself has been inspired by such components, as react-progressive-image-loading and react-responsive-picture.

For example react-progressive-image-loading doesn't allow you to use the <picture> element and react-responsive-picture hasn't any option for lazy loading.

I was seeking the best of both world, so I started the development of React Progressive Picture.

Here are some key feature of React Progressive Picture:

  • TDD led to the creation of an high quality code with 100% of test coverage
  • Using the Intersection Observer API to know exactly when to lazyload your beautiful images, makes React Progressive Picture performance friendly.
    • It actually uses react-intersection-observer behind the scenes, which is another high quality component which has 100% of test coverage as well
  • Define multiple placeholders based on source type or a single placeholder for all of your sources (Useful when you use technique like SQIP).
  • Create advanced effects with CSS filter and apply them to create you unique loading effects.
  • Control the timing function and the transition time to achieve exactly what you have in mind.
  • Lazy load an image after a custom delay.
  • Automatically add a default empty alt tag (also called the NULL alttext)to every image, implying they are just decorative images that serves no specific purpose. This is done for accessibility purposes.
  • It simulates Medium progressive image loading out of the box with no configuration needed.



React Progressive Picture code example

You can find more example in the example folder.


sourcesarrayfalse-The array of source objects specifies multiple media resources for the
placeholderstringfalse-Placeholder image to show until the src loads
srcnumbertrue-The image URL
altstringtrue''Defines an alternative text description of the image.
sizesstringfalse-Sizes attribute to be used with src for determing best image for user's viewport.
transitionTimenumbertrue750Time in millisecond to transition the effects
timingFunctionstringtrue'ease'Timing function to use for the effects
blurnumberfalse10Initial value for the blur filter
grayscalenumberfalse0Initial value for the grayscale filter
opacitynumberfalse1Initial value for the opacity filter
filterstringfalse-The filter CSS property to applies graphical effects. Read more here:
delaynumberfalse0Time in milliseconds before src image is loaded
optionsobjectfalse-react-intersection-observer options:


Yes please!

Pull requests and reporting an issue are always welcome :D


Fork and clone the repo:

git clone

Create a branch for the feature/fix:

git checkout -b feat:new-great-idea


npm run dev


yarn dev

to automatically spin up a webpack dev server and see your changes as you make them in the src folder!

Once you are done, push to your fork and submit a pull request.

And remember,


Prettier ESLint

To enforce a consistent style across the entire project we are using Prettier.

We are also using ESLint to catch bugs and syntax errors during development.

We run Prettier and ESLint before each commit thanks to Husky, so that you can focus on what matter the most : writing code.

Please, note that you will not be able to commit/push any changes you made if your code doesn't pass any of the linting stage described above.

In that case check your git-log and fix any problem reported there.

Also note that by default ESLint will try to fix any problems it can fix by itself.

It will bother you only for changes it can't fix.

All of the above assure us that our code base is always consistent with the rules we are using and bug free as much as possible.



We are using Jest and Enzyme to test our components.

We also utilizes cypress to handle some edge cases which are hard to test otherwise.

Commit Guidelines

We follow the Angular Commit Guidelines.

Refer to their documentation for more information.

Note: If you DON'T follow the Angular Commit Guidelines you will not be able to commit your changes.

Intersection Observer

Intersection Observer is the API used to determine if an element is inside the viewport or not.

Can i use intersectionobserver?


Can i use picture?


You can import the intersection-observer and/or picturefill directly or use a service like to add it when needed.

yarn add intersection-observer picturefill

Then import it in your app:

import 'intersection-observer'
import 'picturefill'
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free