You can add images to the /public folder in your Astro site and they will be accessible through the browser.

For example upload /public/test.png, you’ll be able to reach it at http://localhost:4321/test.png.

You can use those images in your components by using an <img /> HTML tag or markdown files:

---
layout: ../layouts/Layout.astro
---

# Contact

You can contact us at...

![](/test.png)

Images stored in /public are served as-is.

However Astro can do a lot more.

But to unlock the functionality you have to store images inside src, for example in a new folder called src/images.

Now from a page component, for example src/pages/about.astro

---
import Layout from '../layouts/Layout.astro'
---

<Layout title='About'>
  <h1>About</h1>
</Layout>

we can add images using the HTML <img /> tag in this way:

---
import Layout from '../layouts/Layout.astro'
import testImage from '../images/test.png'
---

<Layout title='About'>
  <h1>About</h1>
  <img src={testImage.src} alt="some test image">
</Layout>

But we can also use the <Image /> component provided by Astro:

---
import { Image } from 'astro:assets';
import Layout from '../layouts/Layout.astro'
import testImage from '../images/test.png'
---

<Layout title='About'>
  <h1>About</h1>
  <Image src={testImage} alt="some test image" />
</Layout>

You might get an error, opening the image in a new tab will show a helpful error message saying “Server Error: MissingSharp: Could not find Sharp. Please install Sharp (sharp) manually into your project or migrate to another image service.”

Go back to the terminal and run npm install sharp, then restart the Astro dev server with npm run dev

This is worth doing because now Astro will automatically add to the img tag the image width and height and makes it load lazily. This improves performance and avoids CLS (cumulative layout shift) - you know, when you refresh a page and there’s a ton of layout shifts when images load.

This helps you build a better experience for your users.

In addition to <Image />, Astro also provides a <Picture /> tag that you can use to generate a <picture> HTML tag which is handy to generate responsive images.

Lessons in this unit: