A Guide to Next.js Image Optimization Using next/image
Gone are the days when customers were satisfied with slow-loading websites that took five to ten seconds to load. These days, customers want lightning-fast load times and will not settle for less. Failure to meet this expectation can lead to churn, high bounce rates, poor SEO performance, and low search engine results page (SERP) ranking. We must ensure that customers always get the best experience.
There are different factors and aspects of a website that we must focus on to provide the best user experience and achieve optimum performance. One of these factors is the size of the images on our website. If not properly optimized, images can negatively affect website performance.
We can avoid this by ensuring that images are properly optimized. There are different manual and programmatic tools we can use to optimize images, such as online optimization tools and CDNs like Imgix and Cloudinary. Another tool we can use to optimize images is the custom image component Next.js provides.
In this article, we will explore the Next.js image component and how it helps with image optimization. We will learn how it works, its features, and how to integrate it into Next.js applications.
Importance of image optimization
Data from Web Almanac shows that images account for almost 75% of a webpage’s weight, and 75% is a lot! Images are a major culprit when it comes to a webpage’s size. This may not be an issue for websites that don’t have images. However, most of them do.
We cannot simply stop using images because of their large size. Not only will that lead to a poor browsing experience, but it will also affect industries that rely heavily on them, such as the e-commerce industry.
This is where image optimization comes in. The image optimization process involves compressing and reducing the size of image files, resizing images to the appropriate dimensions, and choosing next-gen image formats that provide optimal performance, such as WebP and AVIF.
We can eliminate the negative impact that images have on websites by properly optimizing them. That way, we can have as few or as many images on our website without affecting performance. Image optimization ensures that our websites have the best Core Web Vitals (CWV), enhances website loading speed, reduces bounce rates, improves SEO, and boosts overall user engagement.
What is the Next.js image component?
The Next.js image component, or next/image, is a custom component from Next.js. It is an extension of the standard HTML img element with additional features and optimizations. It’s basically a version of the regular img element on steroids. It allows us to easily and automatically optimize images in our Next.js applications.
While there are online tools that we can use to optimize images, they are not effective at scale. Neither are these manual methods efficient for websites with hundreds and thousands of images. This is where next/image comes in as a programmatic solution for optimizing images.
Benefits of next/image
There are different advantages and benefits of working with the image component.
Automatically compresses images
The component automatically compresses images for optimum performance, which improves the overall performance of a website. This helps save bandwidth by reducing image file sizes and the amount of data the browser needs to download during rendering.
Serves images in modern formats
The component automatically serves images in modern image formats that are supported by the user’s browser. This ensures that only the most optimized and lightweight version of images reaches the client. Next.js serves images in modern forms because these formats preserve fidelity and quality while remaining performant.
Supports image lazy loading
The component supports the lazy loading and priority loading of images. Lazy loading means the images are loaded only when they enter the viewport rather than all at once when the page loads. This loading strategy helps to improve the initial page load time. Priority loading lets us specify which images should be loaded first based on their importance to the user's current view.
Improves user experience
Optimized images lead to fast-loading websites, which in turn means that users get the best experience possible. Using next/image not only enhances website load times but also minimizes Cumulative Layout Shift (CLS) by ensuring that images are loaded with their appropriate width and height dimensions. This further improves the overall user experience.
Provides a richer developer experience and boosts productivity
The component abstracts the complexities of image optimization and makes it easier for us to work with images. This means we can focus on core activities, such as handling bugs and building propriety functionalities. We can rest easy knowing that we don’t have to worry about optimizing images because next/image has that taken care of for us.
Deliver a fast website with a visual Page Builder
Prismic is a headless solution, with a visual Page Builder for your marketing team to release pages independently
How to import next/image
You can follow the simple steps below to import next/image into your Next.js application.
First you will want to install Next.js by running the following command:
npx create-next-app@latest
To complete the process, simply import the image component into the file where it's needed. That’s it!
import Image from 'next/image' //import the image component
export default function Page() {
return (
<Image
src="/profile.png"
width={500}
height={500}
alt="Picture of the author"
/>
)
}Properties of next/image
As of this writing, the image component has sixteen properties. Here’s a brief overview of each property.
Required Props
src: Used to specify the source of an image. The source can be an external URL or a statically imported file. Its prop type isstring.widthandheight: Defines the dimensions of an image. Their prop type isnumber.alt: Used to provide alternative text for an image. This text is displayed when the image fails to load. The alt text is also important for accessibility and SEO. Its prop type isstring.
Optional props
loader: A custom function that generates the complete URL of an image source. For example, if the source is a partial URL such asprofile.png, we can write a loader to resolve the full URL, sayhttps://imigx.location-of-image/profile.png.fill: Instead of setting the width and height of an image, we can use thefillprop instead. It will cause the image to fill any available space in its parent element. Its prop type isbooleanand defaults toposition: "absolute".sizes: Used to set up responsive sizes for images at different breakpoints. The image component will use the sizes defined to generate the appropriatesrcSetversions of the images. This property is only needed for images that use thefilllayout. Its prop type isstring, and its default value is100vw(full-screen width).quality: A range of numbers between 1 and 100 that determines the quality of the optimized image. Its prop type isnumber, and it defaults to 75.priority: Next.js lazy loads all images by default. However, when an image’spriorityis set totrue,next/imagepreloads that image. Its prop type isboolean, and it defaults tofalse.placeholder: Allows us to display a low-resolution version of an image as a placeholder while the actual image loads. Its prop type isstring, and it defaults toempty. When set toemptyno placeholder will be shown. However, when set toblur, an image blur placeholder will appear till the image finishes loading.
Advanced props
style: Allows us to pass an object of CSS styles directly to an image component. This gives us more control over the styling of images.onLoadingComplete: A callback function that runs once the image has finished loading and the placeholder has been removed.onLoad: A callback function that runs once the image has finished loading.onError: A callback function that runs if the image does not load.loading: Defines the loading strategy for an image. It is set tolazyby default. It can also be set toeager, which means the component will load the image immediately.blurDataURL: Works together with theplaceholderprop. It specifies a data URL for a blurred version of the image, which is displayed as the placeholder.
The code snippet below shows a practical application of the properties.
import Image from 'next/image'
const imageLoader = ({ src, width, quality }) => {
return `https://res.cloudinary.com/${src}?w=${width}&q=${quality || 75}`
}
const imageStyle = {
borderRadius: '50%',
border: '1px solid #fff',
}
export default function Page() {
return (
<Image
loader={imageLoader}
src="/profile.png"
width={500}
height={500}
alt="Picture of the author"
quality="85"
loading="lazy"
proprity={true}
style={imageStyle}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
onLoadingComplete={(img) => console.log("image loaded successfully")}
/>
)
}Build the most performant websites
Join other developers on the leading edge of development and subscribe to get monthly insights on creating websites that are performant and deliver maximum business value.
Improvements with Next.js 13
Data from a community survey performed by the Next.js team showed that 70% of respondents use the image component in production, and they saw improved Core Web Vitals. The image component received the following improvements with the launch of Next.js 13.
- It provides enhanced image optimization, meaning images will load faster, even with poor internet connections.
- The
altattribute is now required. This will enforce accessibility best practices for images. - It ships less client-side JavaScript, which helps reduce layout shifts and provides faster loading.
- It supports native browser lazy loading. This means the component is much faster because native lazy loading doesn’t require hydration, leading to better performance.
Integrate next/image in your Next.js 13 project
Seeing code in action can often solidify concepts and help with practical application. If you’re ready to take your understanding of next/image a step further, this video walks through implementing the Next.js image component in a Next.js 13 project step-by-step.
Install the starter and see how to optimize images on your website with Next.js and how you can further simplify this using Prismic's image component!
Summing up next/image
Images are an integral part of the web experience. After all, a picture — or image — is worth a thousand words. Luckily, we don’t need to trade between performance and providing users with engaging content. We can use tools like next/image to ensure that all website images are properly optimized.
Try editing a page with Prismic
A visual page builder, configured to marketing team's needs. They can easily create on-brand website pages, release more, attract more visitors and convert quality leads.
Frequently asked questions
What is the best image format for Next.js?
No image format works best for Next.js. Instead, Next.js helps with image optimization by ensuring browsers receive images in the most compatible and performant format. It automatically serves images in modern formats such as WebP and AVIF.
What attributes do you always add to the Next.js image component?
For next/image to work properly, the src and alt properties are required. Also, when fetching images from remote sources, the width and height properties must be included because Next.js cannot access remote files during the build process. However, when working with local images, Next.js automatically detects the width and height of any imported images.
How does Next.js image work?
The image component uses Squoosh, a fully node-based image optimization solution, to optimize images. The component lazy loads images by default to improve website performance and load time.
