Image Component with Next.js

The images below use the next/image component to ensure optimal format and size for this browser.

Images are also lazy loaded by default which means they don't load until scrolled into view.

Try scolling down to try it out!

---

The following is an example of a reference to an interal image from the public directory.

Notice that the image is responsive. As you adjust your browser width, a different sized image is loaded.

---

The following is an example of a reference to an external image at assets.vercel.com.

External domains must be configured in next.config.js using the domains property.

---

Layouts

The following pages demonstrate possible layout property values.

Click on one to try it out with your current device and be sure to change the window size or rotate your device to see how the image reacts.

• layout="intrinsic"
• layout="responsive"
• layout="fixed"
• layout="fill"
• background demo

---

Checkout the documentation for Image Optimization to learn more.