# Images and Fonts
Course: [Astro](https://www.devtutorials.ai/learn/astro) · Section: Content
Source: https://www.devtutorials.ai/learn/astro/content/images-and-fonts
> Images in public/ and src/, the Image and Picture components, local and remote images, authorized domains, image sizes, responsive layouts, fit and position, images in Markdown and collections, getImage(), SVG components, image services and the Fonts API.
## Images in Astro
- Images are often the heaviest part of a page. A large photo can be bigger than all the HTML, CSS and JavaScript together.
- Astro has built-in tools that make images smaller and load them at the right time.
- **Image optimisation** = making an image file smaller (resize, compress, modern format) without visible loss.
- In this lesson, you will add optimised images to Asha's site, and load a custom font.
**Simple lesson:** use Astro's image tools, and your images get smaller and safer to load.
### A Real-World Example
- Asha adds a 4000 × 3000 photo from her phone as a post cover. The file is 4 MB.
- On the page, the photo is only shown 800 pixels wide.
- With a plain ``, every reader downloads all 4 MB.
- With Astro's ``, the build makes an 800-pixel-wide version in a modern format, often under 100 KB.
Press **▶ Run**. Then open **HTML sent to browser** and look at the `` tag.
The image is {cover.width} × {cover.height} in the file.
`,
"src/assets/cover.svg": `
`,
}}
/>
What happened:
- `import cover from "../assets/cover.svg"` gave Astro the image's file and its size.
- `width={300}` was given. Astro worked out `height="200"`, to keep the shape.
- Astro added `loading="lazy"` and `decoding="async"` for you.
### What You Will Learn
In this lesson, you will learn:
1. Where to keep images: `public/` or `src/`.
2. How `` and `` work.
3. How to show remote images, and allow their domains.
4. How image sizes and responsive layouts work.
5. How to use images in Markdown and collections.
6. What `getImage()`, SVG components and image services are.
7. How to load fonts with the Fonts API.
## Images in public/ vs src/
### src/ Images
- Keep most images in `src/`, such as `src/assets/`.
- Import them: `import cover from "../assets/cover.jpg";`.
- Astro knows their size and **optimises** them at build time.
- The file name gets a hash, such as `cover.B2x9a.webp`, so browsers can cache it for a long time.
### public/ Images
- Images in `public/` are copied as they are. They are **not** optimised.
- Use them with a plain path: `src="/photo.jpg"`.
- Use `public/` only when a file must keep its exact name, such as `favicon.svg` or a social image.
Default to `src/assets/` for images. Only move an image to `public/` when something outside your code needs its exact address.
**Simple lesson:** images in `src/` are optimised. Images in `public/` are copied as they are.
## The Image and Picture Components
### The Image Component
- `` comes from `astro:assets`.
- It needs `src` and `alt`.
- **alt** = a short text that describes the image, for screen readers and search engines. Use `alt=""` for a purely decorative image.
- Astro stops the build if `alt` is missing. This protects your readers.
### Image Dimensions
- `width` and `height` set the size of the image Astro makes.
- For a local image, give one of them and Astro works out the other. Give none, and Astro uses the file's own size.
- The browser uses both values to keep space for the image before it loads. The page does not jump.
### The Picture Component
- `` makes a `` element with several formats.
- `formats={["avif", "webp"]}` lists the formats to offer, best first.
- Each browser picks the first format it supports. Older browsers fall back to the `` inside.
The build makes small, modern copies of each image.
Press **▶ Run**. Compare the `` from `` with the `` from ``.
Picture
`,
"src/assets/avatar.svg": `
`,
}}
/>
On your computer, Astro uses the **Sharp** library to turn photos into small WebP and AVIF files. This lab runs in the browser, so it keeps the original file and only writes the same HTML attributes. SVG files are already small, so the labs use them.
**Simple lesson:** `` for one optimised image, `` to offer several formats.
## Local and Remote Images
### Remote Images
- **Remote image** = an image from another website, used with a full URL.
- Astro cannot read its size from your project, so give `width` and `height`.
- Or add `inferSize` and Astro downloads the image once to find its size.
### Authorizing Remote Image Domains
- By default, Astro does **not** optimise images from other websites. It shows them as they are.
- To allow it, list the trusted domains in the config:
```js
export default defineConfig({
image: {
domains: ["images.unsplash.com"],
},
});
```
- `image.remotePatterns` allows wider rules, such as every sub-domain of a site.
- This protects your build from being used to process images from anywhere.
**Simple lesson:** remote images need a size, and their domain must be allowed before Astro optimises them.
## Responsive Images
### The layout Property
- **Responsive image** = an image that adapts to the screen size, so phones download small files and big screens get sharp ones.
- Add `layout` to `` or ``:
- `"constrained"` = shrinks on small screens, never grows past its width. Good for most images.
- `"full-width"` = always fills the width of its container. Good for banners.
- `"fixed"` = keeps the exact size. Good for avatars and icons.
- `"none"` = no responsive behaviour.
- Astro then adds `srcset` and `sizes`. The browser picks the best file for the screen.
- Set a default for the whole site with `image: { layout: "constrained" }` in the config.
### fit and position
- `fit` = how the image fills its box: `"cover"` (crop to fill), `"contain"` (show it all) and others, like CSS `object-fit`.
- `position` = which part to keep when it is cropped: `"top"`, `"center"`, `"left bottom"` and so on.
### Responsive Image Styles
- With a `layout`, Astro adds a small set of styles that make the image behave correctly.
- `image.responsiveStyles` in the config turns them on or off.
Press **▶ Run**. Make the preview narrower by dragging the bar. The constrained image shrinks. The fixed one does not.
fixed
full-width, cropped
`,
"src/assets/banner.svg": `
`,
}}
/>
**Simple lesson:** pick a `layout`, and Astro makes the image fit every screen.
## Images in Content
### Images in Markdown and MDX
- In Markdown, write ``.
- A path starting with `./` or `../` is a local image. Astro optimises it like an ``.
- A path starting with `/` is from `public/` and is not optimised.
### The image() Helper in Collection Schemas
- A post's cover image can be a frontmatter field: `cover: ./cover.jpg`.
- In the schema, use the `image()` helper. The schema becomes a function that receives it:
```ts
schema: ({ image }) =>
z.object({
title: z.string(),
cover: image(),
}),
```
- `image()` checks that the file exists and turns the path into image data you can pass to ``.
- The path is relative to the Markdown file.
### [TS] ImageMetadata
- The type of an imported image is `ImageMetadata`: `src`, `width`, `height` and `format`.
- Use it for a component prop: `interface Props { cover: ImageMetadata }`.
- **[JS]** You do not need the type. The object is the same.
z.object({
title: z.string(),
cover: image(),
coverAlt: z.string(),
}),
});
`,
"src/content/blog/my-desk/index.md": `---
title: My study desk
cover: ./desk.svg
coverAlt: A purple desk with a lamp
---
This is where I write every post.
`,
"src/content/blog/my-desk/desk.svg": `
`,
"src/pages/index.astro": `---
const posts = await getCollection("blog");
---
{posts.map((post) => (
{post.data.title}
))}
`,
}}
/>
**Simple lesson:** use `image()` in a schema for cover images. Pass the result straight to ``.
## Advanced Image Handling
### getImage()
- `getImage()` makes an optimised image **without** an `` tag.
- Use it when you need just the URL, such as for a CSS background or an Open Graph image.
- `const og = await getImage({ src: cover, width: 1200 });` then use `og.src`.
### Importing SVG Files as Components
- An imported `.svg` file can also be used as a component: ``.
- Astro puts the SVG code straight into the HTML. No extra file is downloaded.
- Props you pass, such as `width`, `height` and `class`, are added to the `