Optimization image in Nextjs

Next.js have many features in-build one of them is next/image image component which helps to optimizes the nextjs web page and increases the page loading speed.

The Next.js Image component extends the HTML <img> element with additional features for automatic image optimization, we can use this same as html img tag

• Size Optimization: Automatically render the size of images for each device based on the type to optimize performance, using modern image formats like WebP and AVIF.
• Visual Stability: When using normal html tag layout of the page will change when image is not loaded or after loading, it will be prevented automatically when loading image, Cumulative Layout Shift (CLS)
• Faster Page Loads: By using browser lazy load image with optional blur-up placeholders, this will increase faster page load which helps to improve seo ranking.
• Asset Flexibility: Next.js automatically do ondemand image resizing for file in public path and even for images that are stored on remote servers.

First lets create a image by using the Image component, pass the props which are required to show image.

src, width, height and alt props are required in Image component.

1import Image from 'next/image'
2
3export  default  function  Page() {
4	return ( 
5			<Image 
6				src="/image_url.jpg" 
7				width={500} 
8				height={500} 
9				alt="Place image alt text" 
10			/> 
11		)
12	}

Required Props in Nextjs Image

• src: Same as html image source, you can use public folder image path or external URL.
• width: Same as html image width attribute used to set image width.
• height: Same as html image height attribute used to set image height.
• alt: Image alt text used to display when image is not available and for SEO.

Optional Props in Nextjs Image

• loader: Custom function returning a URL string for the image based on src, width, quality.
• fill: When width and height of the image is unknow, using this will fill image to parent element.
• sizes: String value similar to media query, will change the image size based on screen size.
• quality: Quality of the image can be adjusted by setting the integer between ``1 and 100. Default value is 75.
• priority: Lazy loading is automatically disabled for images using priority = true, image will be considered high priority and preload.
• placeholder: Placeholder to use while loading the image.

Nextjs Image placeholder

Placeholder can have these values blur, empty, or data:image/.... Defaults to empty, When the value is set blur, then the blurDataURL property will be used as the placeholder.

For images which are imported from public static folder then blurDataURL will be automatically populated, except when the image is detected to be animated.

For dynamic image url you have to pass the blurDataURL as needed.

When placeholder is set to empty, then there will be no placeholder while the image is loading, only empty space.

Advanced Optional Props in Nextjs Image

• style: Used to add CSS styles to the image element.
• onLoadingComplete: A callback function that is invoked once the image is completely loaded and the placeholder has been removed.
• onLoad: A callback function that is invoked when the image is loaded. The load event might occur before the image placeholder is removed and the image is fully decoded. If you want to wait until the image has fully loaded, use onLoadingComplete instead.
• onError: A callback function that is invoked if the image fails to load.
• loading: The loading behavior of the image, defaults value is lazy, use eager to load image immediately.
• blurDataURL: A Data URL to be used as a placeholder image before the src image successfully loads, only works when placeholder="blur.
• unoptimized: When true, the source image will be served as-is instead of changing quality, size, or format, defaults value is false.

Used 'use client' for onLoadingComplete, onLoad, onError because these are client side events.

Configuration Image Options

Configure only to access image from particular domain, this will helps to load image from valid source.

remotePatterns helps to load image from valid host which matches the pattern and the protocol should be https

1module.exports = {
2  images: {
3    remotePatterns: [
4      {
5        protocol: 'https',
6        hostname: '**.example.com',
7      },
8    ],
9  },
10} 

Wildcard patterns can be used for both pathname and hostname and have the following syntax:

• * match a single path segment or subdomain
• ** match any number of path segments at the end or subdomains at the beginning

Similar to remotePatterns, domains configuration can be used to provide a list of allowed hostnames for external images, domains configuration does not support wildcard pattern matching and it cannot restrict protocol, port, or pathname.

1module.exports = {
2  images: {
3    domains: ['assets.example.com', 'static.example.com'],
4  },
5}