Topic

Optimize images

Definition

The Next.js Image component optimizes image delivery by selecting suitable sizes and reserving layout space from declared dimensions or a sized container.

In simpler words

Tell Next how large an image will be so it can send an efficient file and the page does not jump.

Image optimization improves loading experience, but it does not make untrusted remote hosts or misleading alt text safe.

Open official example (opens in new tab)

After this you can

Prevent image layout shift
Configure trusted remote image sources
Decide when priority is appropriate

Reserve image space

For a known-size image, provide width and height. For fill mode, give the parent a deliberate size and positioning context. Both approaches let the browser reserve space before the image data arrives.

The sizes prop helps Next select a responsive source size. Without it, a responsive image can download a file that is much larger than the display slot requires.

A stable avatar image

import Image from 'next/image';

<Image src="/avatars/ada.png" alt="Ada Lovelace" width={80} height={80} />

The declared dimensions reserve an 80 by 80 slot and enable sizing optimization.

Mistake: unconfigured remote image

// Wrong — arbitrary remote host
<Image src="https://unknown.example/avatar.png" alt="Avatar" width={80} height={80} />

// Right — add the known host to images.remotePatterns, then use it

Remote hosts are an explicit configuration and security decision.

Prioritize only the visual entry point

Definition

priority tells Next an image is important to the initial viewport and should preload.

In simpler words

Use it for the genuine primary visual, not for every image on a page.

Write alt text that conveys the image’s purpose; use alt="" for purely decorative images.

Use a correctly sized fill container rather than treating fill as a shortcut around layout decisions.

Live playground

Image optimization playground

Compare a fixed-size image with a fill image inside a sized container.

next/image needs width/height or a sized fill container.

next-image-optimization

Keep in mind

Provide width and height or a sized fill container.
Configure only trusted remote hosts.
Use priority sparingly for above-the-fold content.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. Why next/image?

Concept

Optimized loading, sizing, and modern formats via the Image componentIt uploads and stores your images on a Next.js CDN automaticallyIt converts every image to base64 and inlines it in the HTMLIt renders images as CSS background images to lazy-load them

2. Required props commonly?

Syntax

src and a loader; width and height are inferred from any filesrc, alt, and priority on every imagesrc, alt, and sizing strategy (width/height or fill)src and sizes; alt is optional for decorative images

3. fill layout needs?

Practical

Explicit width and height alongside the fill propParent positioned; image fill covers that boxA parent with display: flex to stretch the imageThe sizes prop set to 100vw for fill to activate

4. Remote images?

Logic

Wrap the URL in the unoptimized prop so remote hosts are allowedAdd the host to a NEXT_PUBLIC_IMAGE_HOSTS variablePass a custom loader prop to every remote imageConfigure remotePatterns/domains in next.config

5. priority prop?

Concept

Loads the image at a higher resolution than othersPrioritize LCP image loadingPreloads the image but still lazy-loads it below the foldMoves the image ahead of others in the DOM order

6. Why alt text?

Practical

It sets the filename used by the image optimizerIt is required for next/image to generate a srcsetIt improves the cache key so variants are reusedAccessibility and meaning when images don’t show

7. Avoid huge unoptimized photos how?

Syntax

Set unoptimized so the browser compresses them insteadProvide appropriate sizes and let the optimizer serve variantsConvert them to base64 data URLs to shrink the payloadLower the quality prop to 1 for every image

8. Static import benefit?

Logic

The image is inlined into the JS bundle as base64Next can infer dimensions automatically for local importsIt skips optimization since the file is already localIt lets you omit the alt prop for imported images

9. When unoptimized?

Concept

Whenever you want faster local development buildsFor every image once the site is deployed to productionSpecial cases (already optimized SVGs/external constraints) — know whyWhen you need the image lazy-loaded by default

10. Which is best practice?

Practical

Use next/image with meaningful alt and correct sizingUse raw <img> with loading="lazy" for all content imagesUse next/image but set unoptimized to simplify the configUse a CSS background-image with aria-label for photos

11. Why provide width and height?

Conceptintermediate

import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" width={800} height={400} />

To cap the image so it never loads larger than those pixelsTo reserve space and avoid layout shiftTo tell the optimizer which single variant to generateTo enable lazy loading, which needs known dimensions

12. What must the parent have for fill to work?

Syntaxadvanced

<div>
  <Image src="/bg.jpg" alt="" fill />
</div>

A fixed width and height in pixelsA positioned parent (e.g. position: relative)display: flex with align-items: stretchoverflow: hidden to clip the image to the box

13. What extra step does a remote image require?

Practicalintermediate

<Image src="https://cdn.example.com/a.jpg" alt="A" width={100} height={100} />

Passing the unoptimized prop so the remote host is trustedAdding a crossOrigin="anonymous" attribute to the ImageProxying the image through a local Route Handler firstAllowlisting the host via remotePatterns in next.config

14. What does priority do here?

Logicadvanced

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

Eagerly loads this image, useful for the LCP heroLoads it at a higher quality than the default settingRenders it before any other component on the pagePreloads it but defers rendering until the rest is ready

15. What accessibility attribute is missing?

Conceptintermediate

<Image src="/logo.png" width={40} height={40} />

alt text describing the imageA role="img" attribute on the ImageAn aria-hidden attribute for decorative logosA title attribute summarizing the logo

Checking your session…