Next & Notion blog

Why Use Image Instead of img

Images are heavy. They slow down websites if you don’t optimize them. Next.js gives you the Image component, which automatically:

Compresses and serves images in modern formats (like WebP).
Resizes images for different screen sizes.
Lazy loads images (they load only when visible).
Uses caching to avoid re‑fetching.

Core Props You Should Know

Here are the main props you’ll use most often:

Prop	What it does	Example
src	Path or URL to the image	src="/profile.png”
width	Image width in px	width={500}
height	Image height in px	height={500}
alt	Alt text for accessibility	alt="Profile picture”
fill	Makes image fill its parent container	fill
sizes	Responsive sizing rules	sizes="(max-width: 768px) 100vw”
quality	Control compression (1–100)	quality={80}
priority	Preload important images	priority
placeholder	Blur or empty placeholder	placeholder="blur”

Example: Basic Usage

import Image from "next/image";

export default function Profile() {
  return (
    <Image
      src="/profile.png"
      width={400}
      height={400}
      alt="Picture of me"
      priority
    />
  );
}

👉 This will serve an optimized, cached, responsive image automatically.

Example: Responsive Fill

<Image
  src="/cover.jpg"
  alt="Cover photo"
  fill
  sizes="100vw"
  style={{ objectFit: 'cover' }}
/>

👉 The image fills the parent container and adapts to screen size.

Wrap‑Up

The Image component is one of those things that feels small but makes a huge difference. Instead of worrying about compression, formats, or responsive sizes, you just drop in Image and let Next.js handle the heavy lifting.

So if you’re building with Next.js, always reach for Image over img — your users (and Lighthouse scores) will thank you.