Skip to main content

Next.js Image Optimization

Images often account for the largest portion of a website's page weight and can significantly impact performance metrics like Largest Contentful Paint (LCP). Next.js provides a powerful built-in Image component that helps optimize your images automatically, improving your application's loading speed and overall user experience.

Introduction to Image Optimization​

When building web applications, image optimization is crucial for performance. Unoptimized images can lead to:

  • Slow page load times
  • Poor user experience
  • High bandwidth consumption
  • Lower search engine rankings

Next.js solves these problems with its Image component, which automatically optimizes images in your application with minimal configuration.

The Next.js Image Component​

The Image component extends the HTML <img> element with automatic image optimization features:

  • Improved Performance: Automatically serves images in modern formats like WebP and AVIF when supported by the browser
  • Visual Stability: Prevents layout shift automatically as images load
  • Faster Page Loads: Lazy loads images by default, loading them as they enter the viewport
  • Responsive Images: Automatically generates multiple sizes for different device widths

Getting Started with Next.js Image Component​

Basic Usage​

First, import the Image component from 'next/image':

jsx
import Image from 'next/image';

function MyComponent() {
  return (
    <div>
      <h1>My Next.js App</h1>
      <Image
        src="/profile.jpg"
        alt="Profile Picture"
        width={500}
        height={300}
        priority
      />
    </div>
  );
}

The priority attribute is used for images that will be the Largest Contentful Paint (LCP) element on your page. This tells Next.js to prioritize loading this image.

Required Props​

The Next.js Image component requires the following props:

  • src: The path or URL to the source image
  • alt: Descriptive text for screen readers and SEO
  • width and height: The dimensions of the image (helps prevent layout shift)

Local Images vs Remote Images​

Next.js handles local and remote images differently:

Local Images (Imported)​

For local images, you can import them directly:

jsx
import Image from 'next/image';
import profilePic from '../public/profile.jpg';

function Profile() {
  return (
    <Image
      src={profilePic}
      alt="Profile picture"
      // width and height are automatically provided
      placeholder="blur" // Optional blur-up while loading
    />
  );
}

With imported images, Next.js automatically determines the width and height based on the imported file.

Remote Images​

For remote images, you must provide width and height:

jsx
import Image from 'next/image';

function Avatar() {
  return (
    <Image
      src="https://example.com/avatar.jpg"
      alt="Avatar"
      width={500}
      height={500}
    />
  );
}

Additionally, remote domains must be configured in your next.config.js file:

js
module.exports = {
  images: {
    domains: ['example.com'],
  },
}

Responsive Images​

You can make images responsive using the fill property along with sizes:

jsx
import Image from 'next/image';

function ResponsiveHero() {
  return (
    <div style={{ position: 'relative', width: '100%', height: '50vh' }}>
      <Image
        src="/hero.jpg"
        alt="Hero image"
        fill
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        style={{ objectFit: 'cover' }}
      />
    </div>
  );
}

The fill property makes the image fill its parent container, while sizes helps Next.js generate appropriately-sized images for different viewport widths.

Image Loading Optimization​

Lazy Loading​

By default, images are lazy-loaded, meaning they only load as they enter the viewport. This improves initial page load performance. For images above the fold, use the priority attribute:

jsx
<Image
  src="/hero.jpg"
  alt="Hero Banner"
  width={1920}
  height={1080}
  priority // Load this image immediately
/>

Placeholder Images​

You can show placeholders while images load:

jsx
// For local images
<Image
  src={localImage}
  alt="Local image"
  placeholder="blur"
/>

// For remote images
<Image
  src="https://example.com/photo.jpg"
  alt="Remote image"
  width={700}
  height={475}
  placeholder="blur"
  blurDataURL="data:image/svg+xml;base64,..."
/>

Here's a practical example of using Next.js Image component in an e-commerce product gallery:

jsx
import Image from 'next/image';

function ProductGallery({ products }) {
  return (
    <div className="product-grid">
      {products.map((product) => (
        <div key={product.id} className="product-card">
          <div className="product-image-container">
            <Image
              src={product.image}
              alt={product.name}
              width={300}
              height={300}
              style={{ objectFit: 'contain' }}
            />
          </div>
          <h3>{product.name}</h3>
          <p>${product.price.toFixed(2)}</p>
          <button>Add to Cart</button>
        </div>
      ))}
    </div>
  );
}

Advanced Configuration​

You can configure image optimization in your next.config.js file:

js
module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    formats: ['image/webp', 'image/avif'],
    minimumCacheTTL: 60,
    dangerouslyAllowSVG: false,
  },
}

Custom Image Loader​

You can also configure Next.js to use a different image service provider:

js
module.exports = {
  images: {
    loader: 'cloudinary',
    path: 'https://example.cloudinary.com/your_account/',
  },
}

Common loader options include:

Best Practices​

To get the most out of Next.js image optimization:

  1. Always use the Image component for images that are part of your UI
  2. Add priority to LCP images (usually hero images or main content images)
  3. Set appropriate width and height to prevent layout shift
  4. Use responsive images with fill and sizes for full-width images
  5. Use semantic alt text to improve accessibility
  6. Consider using placeholder="blur" for a better loading experience

Common Issues and Solutions​

Images not optimizing​

Ensure your images are either:

  • Local images that are imported
  • Remote images from domains specified in next.config.js

Layout shifts when loading​

Always provide correct width and height props, or use the fill property with a parent container that has a defined size.

Next.js Image component makes images blurry​

Ensure that the provided dimensions match the aspect ratio of the original image, or use appropriate objectFit properties.

Summary​

Next.js Image optimization is a powerful feature that simplifies the complex task of optimizing images for the web. By using the built-in Image component, you can:

  • Automatically optimize images for different devices and browsers
  • Improve page performance with lazy loading and modern formats
  • Prevent layout shifts with proper image sizing
  • Create responsive images with minimal configuration

Implementing proper image optimization can significantly improve your Core Web Vitals metrics, especially Largest Contentful Paint (LCP), leading to better user experience and potentially higher search engine rankings.

Additional Resources​

Exercises​

  1. Convert an existing website section to use the Next.js Image component
  2. Create a responsive image gallery with different image sizes for mobile and desktop
  3. Implement image lazy loading with placeholders for a blog post layout
  4. Configure your Next.js application to use a third-party image optimization service
  5. Measure the performance improvement after implementing the Next.js Image component using Lighthouse or PageSpeed Insights

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)