Deviopath › Next.js

Product Images

Easy · Images

The <Image> component from next/image is an optimized <img>: it resizes images, serves modern formats and lazy-loads them. For a local image given as a string path, you must pass width and height (so the browser can reserve space and the page does not jump), and alt text for accessibility.

For every product, render an <Image> with:

- src = the product image

- alt = the product name

- width={200} and height={200}

In this preview, <Image> renders a plain <img> with your src (real Next.js rewrites it to an /_next/image?... URL).

Next: Root Layout