How to Use the Next.js Image Tag for Optimized, SEO-Friendly Images ?

Images are super important for making your website look good and keeping users interested. But, if you’re not careful, they can slow your site down and mess with the user experience. Nobody wants that, right?

All thanks to one and only most popular framework named Next.js that makes working with images so easy with its built-in component.

In this post, I’ll show you how to use the component in Next.js to optimize your images, speed up your site, and make sure everything looks super no matter what the device is. Alright, let’s deep dive in!

Why Use the Component in Next.js?

You might be asking, "Why not just use the regular <img> tag?" Well, the <Image> component in Next.js actually offers a lot of benefits that the standard <img> tag doesn’t.

• Automatic Optimization: It automatically resizes and compresses images for better performance without doing anything.
• Responsive Images: It takes care of different screen sizes, so your images look great whether they're viewed on a phone, tablet, or desktop.
• Lazy Loading: Images are only loaded when they’re about to show up on the screen, which helps your pages load faster.
• Built-in SEO Benefits: It supports the alt attribute for improved accessibility and better SEO. Don't forget to add alt text for every image.
• CDN Support: Images can be served via Content Delivery Network (CDN), which make them load even faster.

The <Image> component is packed with features that make your site more efficient and user-friendly!

How to Use the Component in Next.js ?

As below described, how you can start using the component in your Next.js project.

Step 1: Import the Image Component

The component is part of Next.js, so you don’t need to install anything extra stuffs. Just import it into your file:

import Image from 'next/image';

Step 2: Basic Usage

Let’s display an image using the component:

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>Welcome to SWHabitation</h1>
      <Image
        src="/images/example.jpg"
        alt="Beautiful landscape"
        width={800}
        height={600}
      />
    </div>
  );
}

Lets see, What is Happening Here?

• src: The path to your image. You can use local files (like /images/example.jpg) or external URLs.
• alt: A description of the image for accessibility and SEO. Always include this!
• width and height: These define the size of the image in pixels.

Step 3: Responsive Images

Do you want your images to scale automatically for different devices? Then use the layout="responsive" property,

<Image
  src="/images/example.jpg"
  alt="Beautiful landscape"
  layout="responsive"
  width={800}
  height={600}
/>

With the use of layout="responsive", the image will maintain its aspect ratio while adjusting to the screen size.

Step 4: Lazy Loading (Default)

The component automatically enables lazy loading, which means images are loaded only when they’re about to enter the viewport. This saves bandwidth and speeds up your site.

You don’t need to do anything—lazy loading is enabled by default.

Step 5: Using External Images
If your image is hosted on an external website, you’ll need to add the domain to the next.config.js file:

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

Then you can use external images like this:

<Image
  src="https://example.com/image.jpg"
  alt="Beautiful view"
  width={800}
  height={600}
/>

Let's understand this with one simple example of a Next.js page showcasing everything we’ve talked till now,

import Image from 'next/image';

export default function Gallery() {
  return (
    <div>
      <h1>Photo Gallery</h1>
      <Image
        src="/images/landscape.jpg"
        alt="Mountain landscape"
        width={800}
        height={500}
        layout="responsive"
        placeholder="blur"
        blurDataURL="/images/landscape-blur.jpg"
      />
      <Image
        src="https://example.com/external-image.jpg"
        alt="External image example"
        width={800}
        height={600}
      />
    </div>
  );
}

Let’s understand what is Happening in This Code?

This is a small React component for a photo gallery. Let’s understand in deep,

In this code there are two Image components available, each showing a different image. Let’s head over to the details,

The first image is the Local Image,

<Image
src="/images/landscape.jpg"
alt="Mountain landscape"
width={800}
height={500}
layout="responsive"
placeholder="blur"
blurDataURL="/images/landscape-blur.jpg"
/>

• src: This is the file path to the image. It starts with a /, meaning the image is available in the public/images folder of your Next.js project.

• alt: A text description of the image for accessibility (e.g., screen readers).

• width & height: The dimensions of the image (800x500 pixels). These help Next.js handle image resizing and layout.

• layout="responsive: Makes the image resize automatically based on the screen size (great for mobile and desktop!).

• placeholder="blur": Displays a blurred version of the image while the full image is loading.

• blurDataURL: A low-resolution version of the image for the blur effect.

and The second image is an external image,

<Image
src="https://example.com/external-image.jpg"
alt="External image example"
width={800}
height={600}
/>

Above snippet is for an image hosted on an external website,

• src: The URL of the image.

• width & height: Same as before, defining the size.

• No layout or placeholder: This means the image will load without these extra features.

What Beginners Should Remember ?

1. Do use the public folder: Place all your images in the public/ folder for easy access.

2. Add alt text: Always add descriptive alt text for better accessibility and SEO.

3. External images need domains: If using images from external sites, configure next.config.js to allow those domains.

For example,

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

4. Use layout="responsive" : It’s perfect for making your site look good on all devices.

Conclusion

If you want your website to load faster, look good on any device, and be more optimized, using the component in Next.js is a simple and effective solution. It's really easy to use, saves time, and helps make sure your website gives the best experience to both users and search engines.

So, go ahead and swap out those old tags. It’ll make a big difference!