ReactJS

Image Optimization in NextJS

Introduction

To optimize images in Next.js optimally, the next/image component is utilized, boasting features for lazy loading, responsive images, and format selection in relation to the webp,jpeg and avif formats with priority given to performance and SEO.

Key Aspects of next/Image

Auto optimizes images (resizing, compressing, and format conversion)

Lazy Loading by default

Responsive Images with sizes, srcSet etc

Support for remote image optimization

Blurred placeholders for improved UX

Basic Usage

import Image from 'next/image';
export default function OptimizedImage() {
return (
<Image
src="/images/example.jpg"
alt="Example Image"
width={600}
height={400}
/>
);
}

Responsive Images

<Image
src="/images/example.jpg"
alt="Responsive Image"
width={800}
height={500}
sizes="(max-width: 768px) 100vw, 800px"
/>

Blurred Placeholder

<Image
src="/images/example.jpg"
alt="Image with Blur"
width={600}
height={400}
placeholder="blur"
blurDataURL="/images/blur-placeholder.jpg"
/>

Optimize Remote Images

Next, configure next.config.js:

module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
},
],
},
};

Then use:

<Image
src="https://example.com/image.jpg"
alt="Remote Image"
width={500}
height={300}
/>

LCP images with priority loading

<Image
src="/images/hero.jpg"
alt="Hero Image"
width={1200}
height={800}
priority
/>

Other Configurations in next.config.js

module.exports = {
images: {
formats: ['image/webp', 'image/avif'], // Use modern, smaller formats
deviceSizes: [640, 768, 1024, 1280, 1600], // Responsive breakpoints (viewport widths)
imageSizes: [16, 32, 48, 64, 96], // For fixed-size images (icons, avatars, etc.)
},
};