ReactJS

Image Optimization in NextJS

Need technical help?

Our experts will get back to you within 24 hours.

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 (<Imagesrc="/images/example.jpg"alt="Example Image"width={600}height={400}/>);}

Responsive Images

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

Blurred Placeholder

<Imagesrc="/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:

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

LCP images with priority loading

<Imagesrc="/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 formatsdeviceSizes: [640, 768, 1024, 1280, 1600], // Responsive breakpoints (viewport widths)imageSizes: [16, 32, 48, 64, 96], // For fixed-size images (icons, avatars, etc.)},};