Raw <img> in a Next.js app

perf/img-elementwarningperformancenextjs-16lighthouse

Why it matters

A plain <img> ships the original file at full size, with no responsive srcset, AVIF/WebP or lazy loading (Lighthouse: properly size images, modern formats, offscreen images).

Fix

Use <Image> from next/image (configure images.remotePatterns for remote hosts).

Credit

From the Next.js team
next/image serves resized, modern-format, lazy-loaded images, which a plain img does not.
From Google Chrome
Lighthouse audits image size, modern formats and offscreen loading.