NextJS Image Benefits §

Asset Flexibility §

The Next.js Image component significantly enhances the traditional element’s capabilities and offers asset flexibility, offering on-demand image resizing whether your images are stored locally, on remote servers, or on CDNs.

Some additional configuration is required to use images that are not stored locally. Specifically, you’ll need to add the base URL of the image to the next.config.js file in your project’s root directory. This is an essential step for optimizing images from a remote source. For example, to add AWS S3 as a remote URL, your next.config.js should look like this:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/your-bucket-name/**',
      },
    ],
  },
}

With this configuration, you can use the image URL in the following format:

<Image
  src="https://s3.amazonaws.com/your-bucket-name/image.png"
  alt="Picture of the author"
  width={500}
  height={500}
/>

For relative URLs, the Next.js Image component also supports custom loaders, providing even more flexibility in how you manage your assets.

Size Optimization §

One of the standout features of the Next.js Image component is its ability to serve optimized images, tailored to each device, automatically. It detects the device’s resolution and serves the image in the most appropriate size.

Moreover, it’s proficient in delivering images in modern formats like WebP, which is around 25-30% smaller than JPEG, and AVIF if it detects the browser can support it. These formats are known for their superior compression and quality characteristics compared to traditional formats.

The above image shows how the Next.js Image component delivers a WebP image, even when the original image is in JPEG format.

Just how effective is this optimization? The screenshot below, comparing the same image in WebP vs. its JPEG source, speaks for itself.

The size of the optimized image is around 36KB, whereas the unoptimized source image is a whopping 4.6MB. The Next.js Image component is serving the same image compressed to less than 1% of the original size, cutting load times to less than a third, without any visual degradation.

Faster Page Loads §

Conversion rates drop by nearly 50% if your page load times are 5 seconds or more. The Next.js Image component addresses this issue with out-of-the-box Lazy Loading, ensuring that images are only loaded as they come into the viewport.

This means that images located further down the page (which the user hasn’t reached yet) won’t consume precious loading time or bandwidth unnecessarily. Out of sight, out of mind. Visitors can access your content faster, reducing the risk of abandonment due to long load times, and ultimately, you increase conversions and engagement.

However, keep in mind that while lazy loading is enabled by default, there might be scenarios where you’d actually want to disable it, such as critical above-the-fold images that need to be displayed immediately. Disabling lazy loading in this instance is as simple as setting the priority prop to true. Here’s the code for it:

import Image from 'next/image'
 
function Component() {
  return (
    <Image
      src='/image.jpg'
      alt='Sample image'
      width={400}
      height={400}
      priority={true}
    />
  );
}

Now that you have explored the features and benefits of the Next.js Image component, let’s explore the best practices for Image optimization using it.

Visual Stability §

A common pain point in web design is the layout shift that occurs when images load. This can be disorienting for users and may even lead to accidental clicks on the wrong parts of the page. The CLS, or Cumulative Layout Shift is a metric that tracks this, serving as an indicator of overall page stability. CLS can harm your Core Web Vitals, and the Next.js Image component addresses this issue.

The Next.js Image component avoids layout shifts through the use of placeholders and intrinsic sizing. When you specify the dimensions of an image using the width and height props, the component reserves that space on the page even before the image has been loaded. This ensures that the rest of the page’s elements know how much space the image will occupy, thereby preventing layout shifts as the image loads, offering a smoother user experience.

When you specify width and height props, you’re telling the Next.js Image component what space to reserve for the image on the page layout.

<Image
  src="/path-to-your-image"
  alt="Sample image"
  width={500}
  height={500}
/>

Reference §

Optimizing: Images | Next.js Using Images in Next.js (next/image examples) - YouTube Next.js Image Optimization: A Guide for Web Developers