Use next/image for all images | BeforeMerge Rules | BeforeMerge

Use next/image for all images | BeforeMerge Rules | BeforeMerge

Why This Matters

next/image provides:

Format optimization — serves WebP/AVIF when supported
Responsive sizing — generates multiple sizes for different screens
Lazy loading — images load only when visible
CLS prevention — reserves space to prevent layout shift

Good

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

Bad

<img src="/hero.jpg" alt="Hero" />  // No optimization!