Image Component with Next.js

The images below use the <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.

---

Checkout the documentation for Image Optimization to learn more.