NEXTJS_USE_NEXT_IMAGE
Requires that next/image is used for all images.Conformance is available on Enterprise plans
The Next.js Image component (next/image
)
extends the HTML <img>
element with features for automatic image optimization.
It optimizes image sizes for different devices using modern image formats, improves visual stability by preventing layout shifts during image loading, and speeds up page loads with lazy loading and optional blur-up placeholders.
Additionally, it provides the flexibility of on-demand image resizing, even for images hosted on remote servers. This may incur costs from your managed hosting provider (see below for more information)
By default, this rule is disabled. Enable it by customizing Conformance.
For further reading, see:
- https://nextjs.org/docs/app/building-your-application/optimizing/images
- https://nextjs.org/docs/pages/api-reference/components/image
Using image optimization may incur costs from your managed hosting
provider. You can opt out of image optimization by setting the optional
unoptimized
prop.
Please check with your hosting provider for details.
If self-hosting, you'll need to install the optional package
sharp
, which Next.js will use to
optimize images. Optimized images will require more available storage on your
server.
This rule will catch the following code.
function App() {
return <img src="/media/image.png" alt="Example" />;
}
The following code will not be caught by this rule.
function App() {
return (
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Landscape picture" width={800} height={500} />
</picture>
);
}
Replace any <img>
elements that are caught by this rule with
next/image
.
Again, please check with your managed hosting provider for image optimization costs.
Was this helpful?