Master Progressive Image Loading in Next.js

22 November 20243 min read

Optimize Progressive Image Loading in Next.js: A Complete Guide

Table of Contents

1. Using the Main Color of the Image

2. Using a Solid Background Color

3. Displaying Low-Resolution Thumbnails

4. Combining Blur and Compression

5. Leveraging Built-in Placeholders with Next.js

Conclusion

Progressive image loading is a critical feature in modern web applications, enhancing user experience by delivering smooth transitions from placeholders to fully loaded images. Next.js, with its powerful next/image component, provides advanced capabilities to implement progressive loading efficiently.

This guide covers five effective strategies for optimizing image loading in Next.js, including using dominant colors, custom thumbnails, and advanced blur techniques. By applying these methods, you can create visually appealing and high-performance applications.

1. Using the Main Color of the Image

Extracting the dominant color from an image and using it as a placeholder offers a seamless transition before the image fully loads. In Next.js, this can be achieved by generating a blurDataURL.

Implementation Example:

tsx

1 import Image from "next/image";
2 
3 // Utility to generate a data URL with the main color
4 const rgbDataURL = (r, g, b) =>
5   `data:image/gif;base64,R0lGODlhAQABAPAA${btoa(
6     String.fromCharCode(r) + String.fromCharCode(g) + String.fromCharCode(b)
7   )}/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;
8 
9 const ColorPlaceholderExample = () => (
10   <div>
11     <h1>Using Main Color as Placeholder</h1>
12     <Image
13       src="/dog.jpg"
14       alt="Dog"
15       placeholder="blur"
16       blurDataURL={rgbDataURL(237, 181, 6)} // Dominant yellow
17       width={750}
18       height={1000}
19     />
20     <Image
21       src="/cat.jpg"
22       alt="Cat"
23       placeholder="blur"
24       blurDataURL={rgbDataURL(2, 129, 210)} // Dominant blue
25       width={750}
26       height={1000}
27     />
28   </div>
29 );
30 
31 export default ColorPlaceholderExample;

2. Using a Solid Background Color

A simple yet effective approach is to use a predefined solid background color as the placeholder. This can be configured in next.config.js.

Setup in next.config.js:

1 module.exports = {
2   images: {
3     placeholder: "color",
4     backgroundColor: "#f4f4f4", // Light gray
5   },
6 };

Usage Example:

tsx

1 <Image
2   src="/path/to/image.jpg"
3   alt="Sample Image"
4   width={500}
5   height={500}
6   placeholder="color"
7 />

3. Displaying Low-Resolution Thumbnails

Using low-resolution thumbnails as placeholders before the high-quality image loads ensures faster visual feedback. Add a blur effect for a smoother transition.

Example Implementation:

html

1 <div class="placeholder">
2   <img src="low-res-thumbnail.jpg" class="img-small" />
3 </div>
4 <style>
5   .img-small {
6     filter: blur(10px);
7     transition: opacity 0.5s ease-out;
8   }
9   .img-small.loaded {
10     opacity: 1;
11     filter: blur(0);
12   }
13 </style>
14 <script>
15   const img = document.querySelector(".img-small");
16   img.onload = () => img.classList.add("loaded");
17 </script>

4. Combining Blur and Compression

This technique involves displaying a blurred, highly compressed image while the full-resolution image loads. In Next.js, you can leverage libraries like browser-image-compression to achieve this.

Custom Component Example:

tsx

1 "use client";
2 
3 import React, { useEffect, useState } from "react";
4 
5 import imageCompression from "browser-image-compression";
6 
7 const ProgressiveImage = ({ src, alt, width, height }) => {
8   const [currentSrc, setCurrentSrc] = useState("");
9   const [isLoading, setIsLoading] = useState(true);
10 
11   useEffect(() => {
12     const loadImage = async () => {
13       const response = await fetch(src);
14       const blob = await response.blob();
15       const compressedBlob = await imageCompression(blob, {
16         maxSizeMB: 0.0002,
17         maxWidthOrHeight: 16,
18       });
19 
20       const tinyUrl = URL.createObjectURL(compressedBlob);
21       setCurrentSrc(tinyUrl);
22 
23       const fullImage = new Image();
24       fullImage.src = src;
25       fullImage.onload = () => {
26         setCurrentSrc(src);
27         setIsLoading(false);
28       };
29     };
30 
31     loadImage();
32   }, [src]);
33 
34   return (
35     <img
36       src={currentSrc}
37       alt={alt}
38       width={width}
39       height={height}
40       style={{
41         filter: isLoading ? "blur(10px)" : "none",
42         transition: "filter 0.5s ease-in-out",
43       }}
44     />
45   );
46 };
47 
48 export default ProgressiveImage;

5. Leveraging Built-in Placeholders with Next.js

Next.js's next/image component provides a built-in blur placeholder option for static images. This feature generates a low-quality preview of the image automatically.

Usage Example:

tsx

1 import Image from "next/image";
2 
3 import mountains from "/public/mountains.jpg";
4 
5 const BlurPlaceholderExample = () => (
6   <div>
7     <h1>Image Placeholder with Blur</h1>
8     <Image
9       src={mountains}
10       alt="Mountains"
11       placeholder="blur"
12       width={700}
13       height={475}
14     />
15   </div>
16 );
17 
18 export default BlurPlaceholderExample;

Note: This feature requires static images for pre-processing during build time.

Conclusion

Progressive image loading is a vital part of optimizing web performance and enhancing user experience. By leveraging the built-in features of Next.js alongside advanced techniques like blur effects and thumbnails, you can significantly improve the visual appeal and responsiveness of your application. Start implementing these strategies today to create better, faster, and more engaging web experiences!

nextjs