next/image is the built-in image component in NextJS 10. Please, do not use this tag for questions related to the next-images package (use [next-images] instead).
next/image is the Next.js team's solution to performant images on the web. The Next.js Image Component is just a drop-in replacement for the HTML <img> element, evolved for the modern web.
When using the next/image component, images are automatically lazy-loaded, meaning they're only rendered when the user is close to seeing the image. This prevents loading that 30% of images outside of the initial viewport.
The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.
Automatic Image Optimization works with any image source. Even if the image is hosted by an external data source, like a CMS, it can still be optimized.
For usage and available props visit https://nextjs.org/docs/api-reference/next/image
But if I try using next/image:
