How To Optimize Images in Next.js with Next/Image Component

Introduction

This article explores why next/image serves as an effective tool for managing images and addressing concerns like reduced performance, elevated bandwidth consumption, and sluggish rendering.

Why Choose next/image Over Standard img Tags?

Built-in optimizations and streamlined advanced feature implementation. However, costs may apply on certain hosting platforms.

Alternative Optimization Methods

• Lazy loading below-the-fold content
• Using fetchpriority for critical images
• Asynchronous image decoding
• Manual srcset configuration

Fundamental Image Optimization Guidelines

Prioritize Critical Images and Lazy Load Non-Critical Ones

import Image from "next/image";
export const Page = () => (

src="/images/lcp-image.png"
alt="LCP Image"
priority
width={1000}
height={500}
/>

);

`priority` vs `loading="eager"`: The priority prop is more aggressive — it includes a <link preload> tag, loading before HTML parsing completes.

Image Placeholders and Blur

Use the placeholder property:

• `empty` — Default, no placeholder
• `blur` — Displays blurry version during loading

Use Modern Image Formats

Next.js Image automatically converts to WebP/AVIF based on browser support. AVIF requires explicit enablement.

Use unoptimized prop to disable optimization when needed (legacy systems, SVGs, already optimized images).

Set Sizes Appropriately

1. Automatic Sizing for static imports

2. Explicit Sizing with width and height

3. Implicit Sizing with the fill property

src="/banner.jpg"
alt="Promotional banner"
fill
style={{ objectFit: 'cover' }}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"/>

Why Use the Sizes Attribute with Fill? Without it, browsers may download unnecessarily large images. Without the 33vw size, users could download nine times larger files.

Image Quality

Default quality of 75 typically provides good balance. Ranges from 0 to 100.

Pros of higher quality: Enhanced visuals, professional brand image, improved engagement.

Cons: Longer loading times, increased bandwidth, potential artifacts.

Key Points

1. Next.js Image automatically converts to modern formats (AVIF/WebP).
2. Use priority attribute for images contributing to LCP.
3. Enable lazy loading for below-the-fold images.
4. Always include sizes attribute with layout="fill".
5. Experiment with different quality settings.
6. Use unoptimized prop to skip optimization for specific images.