DEV Community

Cover image for Next.js: Optimizing Images with the next/image Component.
Reme Le Hane
Reme Le Hane

Posted on • Originally published at open.substack.com

Next.js: Optimizing Images with the next/image Component.

#nextjs #imageoptimization

Why Use next/image?

Next.js’s <Image> component is a powerful tool that automatically optimizes images for better performance. This includes:

  • Lazy loading images (loads only when they come into view).

  • Automatically serving the appropriate size for the user’s device.

  • Supporting modern image formats like WebP.

This feature is excellent for improving Core Web Vitals, especially Largest Contentful Paint (LCP).

Example: Using the <Image> Component 

import Image from 'next/image'; export default function OptimizedImagePage() { return ( <div> <h1>Optimized Images in Next.js</h1>  <Image src="/images/sample.jpg" // Path to your image alt="A beautiful scenery" width={800} // Set width height={600} // Set height quality={80} // Optional: Adjust image quality (default: 75) placeholder="blur" // Optional: Adds a blur effect while loading /> </div>  ); }
Enter fullscreen mode Exit fullscreen mode

Key Features of <Image>:

  1. Automatic Resizing: Generates multiple image sizes for different devices and resolutions.

  2. Lazy Loading: Reduces the initial page load time by loading images only when needed.

  3. Placeholder Options:

    1. placeholder="blur": Provides a low-quality image preview (LQIP) while the full image loads.
    2. You can also add a custom placeholder.

Working with Remote Images

For images hosted on external URLs, configure the next.config.js file to allow those domains:

// next.config.js module.exports = { images: { remotePatterns: [ { protocol: 'https', hostname: 'example.com', // Replace with your domain pathname: '/images/**', // Match specific paths if needed }, ], }, };
Enter fullscreen mode Exit fullscreen mode

Then use:

<Image src="https://example.com/images/sample.jpg" alt="Remote image" width={800} height={600} />
Enter fullscreen mode Exit fullscreen mode

Dynamic Images with Responsive Sizing

You can make images responsive by omitting the width and height props and using the layout prop:

<Image src="/images/sample.jpg" alt="Responsive image" layout="responsive" width={800} height={600} />
Enter fullscreen mode Exit fullscreen mode

This automatically adjusts the image dimensions to fit the container.

Bonus: Image Optimization in Markdown Content

If you’re working with Markdown or CMS content, use the next-mdx-remote library and customize images to be rendered with the <Image> component.

Why This Is a Great Trick

  1. Performance: Improves page speed by optimizing images automatically.

  2. SEO: Enhanced performance boosts rankings.

  3. Ease of Use: No need to manually create multiple image sizes or optimize them before upload.

Mastering the <Image> component is a must for building fast and responsive Next.js apps!

Top comments (0)