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!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay