Images

Images play a significant role in the visual appearance of any website. Let's focus on how to add them in Next.js.

The <Image> component is an advanced version of the conventional HTML <img> tag that offers a range of automatic optimizations. It has been designed to address the complexities of modern web design and ensures a visually stable user experience by mitigating layout shifts during the loading phase. The component also resizes images intelligently, which reduces bandwidth consumption on devices with smaller viewports, thus optimizing content delivery.

Back to the Project

Let's check out how to incorporate images into our project. In the public folder, you'll find hero-desktop.png and hero-mobile.png. It's time to include them in our app/page.tsx file using the Image component from next/image.

Upon navigating to the app's home page, the image should be visible.

For the mobile version, add another image with a width of 560px and a height of 620px. If you encounter any issues, refer to the provided solution below.

In Practice