Accelerate an LCP image
The page's main visual is the expected LCP element.
Next.js 16+ · Function
preload
The preload prop on next/image causes a selected image to be preloaded by inserting a link in the document head. Use it mainly for an above-the-fold LCP or hero image.
- Since
- 16
How it works
Set the boolean preload prop on next/image when an image is a likely LCP element, such as an above-the-fold hero. When enabled, Next.js inserts a link in the head so the browser can begin fetching the image earlier; leave it unset or false for ordinary images.
Syntax
<Image preload={true} />Parameters
| Name | Type | Description |
|---|---|---|
preload | boolean | Boolean indicating whether the image should be preloaded; defaults to false. |
Key points
preloadaccepts a boolean value and controls whether the image receives preload treatment.- With
preload={false}, Next.js does not issue the image preload. - Above-the-fold hero imagery is a typical case for enabling the prop.
Common mistakes
- Do not default to
preload; the documentation recommendsloading="eager"orfetchPriority="high"in most cases. - For responsive image alternatives, avoid combining preload or eager loading in a way that causes both candidates to load.
Example: Preload an LCP image
import Image from 'next/image'
export default function Page() {
return (
<Image
src="/hero.jpg"
alt="Mountain landscape"
width={1200}
height={800}
preload
/>
)
}This marks the hero image for early loading by adding a preload link to the document head.
When to use it
Load an above-the-fold hero
A hero image appears immediately in the initial viewport.
Adopt the Next.js 16 prop
A migration replaces the deprecated image priority setting.
Interview questions
QWhat does the preload prop do?
preload is a boolean prop on next/image. When true, Next.js inserts a link in the document head so the browser can start fetching the image before its body image element is discovered.
Follow-up: When should it be used? Use it for a likely LCP image, especially an above-the-fold hero, rather than broadly applying it to images.
QWhat is the default value and effect?
The default is false, so an image is not preloaded unless the prop is enabled. A true value starts the image request earlier through a head link.
Follow-up: What alternatives does the documentation recommend in most cases? Prefer loading="eager" or fetchPriority="high", depending on the desired loading behavior.
QHow does preload relate to priority?
In Next.js 16, priority is deprecated in favor of preload, making the intended behavior clearer. Existing code should migrate to the newer prop when explicitly preloading an image.
Follow-up: What should be checked when two image variants are rendered? Avoid preload or loading="eager" if that would make both variants load.
Related
next/imageloadingfetchPrioritypriorityLargest Contentful Paint (LCP)