The easiest way to add images is to put them in public/images/ and reference them with a root path:

![A terminal window on a desk](/images/terminal-desk.svg)

A terminal window on a desk

![[/images/terminal-desk.svg]]

![[images/terminal-desk.svg]] This works in plain Markdown, MDX, and Obsidian.

Obsidian workflow

Thanks to the images/ junction at the repo root, Obsidian can preview images stored in public/images/:

![A terminal window on a desk](/images/terminal-desk.svg)

Just drop your image into public/images/ and write the path above.

The optimized way

If you want Astro to compress and resize the image, use .mdx with the <Image> component:

---
title: "My Post"
---

import { Image } from 'astro:assets';
import photo from '../../assets/photo.jpg';

<Image src={photo} alt="Description" width={800} />

The trade-off is that Obsidian cannot preview images imported this way.

Tips

  • Use public/images/ + standard Markdown for Obsidian compatibility.
  • Use src/assets/ + <Image> only when you need automatic optimization.
  • Keep image widths reasonable; this layout maxes out around 700px.