Enhancing Image Loading in Next.js

Next.js 14 has improved the way we handle images, allowing for an enhanced user experience with features like blurred image placeholders while images are loading, especially useful in slow network conditions. This post covers how to implement blurred placeholders for local images in a Next.js application.

Why Use <Image/> component?

Image component and placeholders props are essential for improving the performance and user experience of web applications. They help to:

• Improve Perceived Load Time: Displaying a low-quality image while the full image is loading makes the website appear faster.
• Reduce Layout Shifts: Placeholders maintain the image layout, preventing content from jumping around as images load.
• Enhance Aesthetics: A blurred placeholder can make the loading experience more visually appealing.

Implementing Blurred Placeholders

Below is an example of how to implement blurred placeholders for local images in a Next.js application. The example demonstrates importing an image and using the placeholder="blur" feature.

For Local Images:

import Image from "next/image";
import Logo from '@/images/FileSpark-logo.jpg';

export default function Local() {
    return (
        <main className="flex flex-col gap-y-4 mx-auto max-w-2xl items-center justify-between p-24">
            <Image src={Logo} alt="File Spark io" placeholder="blur" quality={100} />
            <h1 className="text-2xl font-bold">Workflow for Showing a Blur Effect for Local Images:</h1>
            <ul className="list-disc list-inside">
                <li>Import Image from next/image</li>
                <li>Import the image from its location</li>
                <li>The Next.js Image component automatically handles width and height</li>
                <li>Use "blur" in the placeholder prop</li>
                <li>To test in the browser, enable Network Throttling:
                    <ul className="list-disc list-inside">
                        <li>Open Developer Tools (Ctrl+Shift+I or Cmd+Option+I)</li>
                        <li>Go to the "Network" tab</li>
                        <li>Click on the "Throttling" dropdown and select a slower network speed, such as "Slow 3G"</li>
                    </ul>
                </li>
            </ul>
        </main>
    );
}

For Remote Images:

import Image from 'next/image';
import getBase64 from '@/components/get-base64';

export default async function RemoteImage() {
    const remoteImage = 'https://images.unsplash.com/photo-1544383835-bda2bc66a55d?q=80&w=1136&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
    const blurDataURL = await getBase64(remoteImage);

    return (
        <main className="flex flex-col gap-y-4 mx-auto max-w-2xl items-center justify-between p-24">
            <Image src={remoteImage} alt="Remote Image" width={1136} height={640} placeholder="blur" blurDataURL={blurDataURL} />
            <h1 className="text-2xl font-bold">Workflow for Showing a Blur Effect for Remote Images:</h1>
            <ul className="list-disc list-inside">
                <li>Use the Image component from next/image</li>
                <li>Use the src attribute to fetch the image from a remote URL</li>
                <li>Test the blur effect by throttling the network speed in the browser</li>
                <li>Provide the blurDataURL property for the image</li>
                <li>For dynamic images, use solutions like Plaiceholder for base64 generation</li>
                <li>Update next.js config with the image domain name</li>
            </ul>
        </main>
    );
}

Helper Function for Base64 Conversion:

import { getPlaiceholder } from 'plaiceholder';

export default async function getBase64(url) {
    try {
        const res = await fetch(url);
        if (!res.ok) throw new Error('Network response was not ok');
        const buffer = await res.arrayBuffer();
        const { base64 } = await getPlaiceholder(Buffer.from(buffer));
        return base64;
    } catch (error) {
        console.error(error.stack);
    }
}

This guide provides a complete workflow for implementing blur image placeholders in Next.js, improving the visual experience during image loading for both local and remote images.