Preview:
import React from "react";
import ProgressiveImage from "react-progressive-image";

import image from "./image.jpg";
import placeholderImage from "./placeholderImage.jpg";

const App = () => {
  /**
   * `placeholder` will be displayed 
   * while the original `src` image is being loaded
   */
  return (
    <ProgressiveImage src={image} placeholder={placeholderImage}>
      {(src) => <img src={src} alt="an image" />}
    </ProgressiveImage>
  );
};

export default App;
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter