jsschools

<Image>

Optimized image component with lazy loading, resizing, and modern formats.

Since Next 13 (next/image App Router) Spec ↗

Syntax

import Image from 'next/image'; <Image src={src} alt="" width={w} height={h} />

Parameters

NameTypeRequiredDescription
src string | StaticImport Yes Local import or remote URL (remote hosts must be allowlisted).
alt string Yes Alternative text (required for accessibility).
width / height number No Intrinsic size; omit when using `fill`.
fill boolean No Make the image fill its positioned parent.

Returns

ReactElement — Renders an optimized, responsive <img>.

Examples

import Image from 'next/image'
import hero from './hero.jpg'

// Local import: dimensions inferred, blur placeholder available
export default function Hero() {
  return <Image src={hero} alt="Hero" placeholder="blur" priority />
}

import Image from 'next/image'

export function Avatar({ url }: { url: string }) {
  return (
    <Image
      src={url}
      alt="User avatar"
      width={64}
      height={64}
      sizes="64px"
    />
  )
}

// next.config.js — allow a remote image host
module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.example.com' },
    ],
  },
}

Notes

Prevents layout shift by requiring known dimensions (or `fill`). Lazily loads by default; set `priority` for above-the-fold/LCP images. Remote URLs must match `images.remotePatterns` in `next.config`. Use `sizes` with `fill`/responsive images for correct srcset selection.

See also