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.

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!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More