next-progressive-image

next-progressive-image

A lightweight React component for progressive image loading, designed for Next.js projects. This component initially displays a low-resolution blurred image, then swaps it with a high-resolution image once it's fully loaded, improving user experience and performance.

Installation

To install the package, use npm or yarn:

npm install next-progressive-image

Example

import React from "react";
import ProgressiveImage from "your-package-name";

function App() {
  return (
    <div>
      <ProgressiveImage
        lowResSrc="path/to/low-res-image.jpg"
        highResSrc="path/to/high-res-image.jpg"
        alt="A beautiful scenery"
        width="500px"
        height="300px"
      />
    </div>
  );
}

export default App;