Dealing with Remote Images in Next.js

The next/image component in Next.js is a powerful tool for optimizing images, but maybe we can have performance problems when dealing with remote images.

When we use the next/image component to display images in our Next.js application, the images are optimized for performance by default. However, when dealing with remote images, we need to consider a few additional factors to ensure optimal performance.

Challenges with Remote Images

When working with remote images in Next.js, there are a few challenges to consider:

1. Known Image Dimensions

The next/image component requires the width and height of the image to be known at build time. When working with remote images, it's not always possible to know the dimensions of the image in advance. This can lead to layout shifts and performance issues if the image dimensions are not specified.

If you don't know the width and height of the image, consider using the fill prop with the required sizes prop to ensure the image is displayed correctly without layout shifts. The purpose of this article is to list the challenges that may affect performance, if you want to see the use of these props, please take a look at the next documentation.

2. Sharp plugin

The next/image component uses the squoosh loader by default to optimize images because it is quick to install and suitable for a development environment. However for a production mode it's strongly recommended to use the sharp loader, which is more powerful and can provide better image optimization.

It's not focused in remote images and can affect static images performance too, but it's important to mention that the sharp loader is not installed by default, so you need to install it manually.

It's a recommendation from the next documentation.

3. Remote Patterns Configuration

I was defining on my next.config file some remotePatterns of different CDNs, but I noticed that the performance was not the best. I was using the next/image component with known dimensions, but the images were still loading slowly. After some research, I found that the problem was the remotePatterns configuration and changed it to the following configuration:

images: {
    remotePatterns: [
        {
            protocol: 'https',
            hostname: '**',
            port: '',
            pathname: '**'
        }
    ]
}

Note

The configuration above will allow images from any domain to be optimized by the next/image component. This configuration may not be suitable for all use cases, so make sure to adjust it according to your specific requirements. But keep in mid that this can affect the performance of your images.

4. Custom Loader

Maybe you need to optimize the images changing something in the URL like the quality, format, or size. In this case, you can use the loader prop to define a custom loader function that modifies the image URL before it's loaded. This can be useful for optimizing images based on specific requirements or constraints.

<Image
    src={image.url}
    alt={image.alt}
    loader={({ src }) => `${src}?w=640&q=75`}
    width={640}
    height={360}
/>

Above we have a simple example of how to use the loader prop, but keep in mid that it could be something more complex depending of your case.

5. Priority

If you have a list of images, or your high image is in the end of the page, you can use the priority prop to prioritize the loading of image and load it when the page loads, by default next only start the image loading when the image is in the viewport, so if you use the priority prop it will load the image even it is not in the viewport.

<Image
    src={image.url}
    alt={image.alt}
    width={640}
    height={360}
    priority
/>

Conclusion

When dealing with remote images in Next.js, it's important to consider the challenges that may affect performance. By addressing these challenges and optimizing the image loading process, you can ensure that your Next.js application loads images quickly and efficiently, providing a better user experience.

Tags