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.
Back to week 3
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.
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.
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 itRemote 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…
10 questions · concept 3 · syntax 2 · practical 3 · logic 2