Working with Images in Posts

Images are part of the story a post tells. This blog keeps its assets under public/static/images/ so they are served as-is and can be referenced from both Markdown and frontmatter.

Images in Markdown

The standard syntax works exactly as you would expect:

Because the file lives in public/, the path is absolute and stable — no import statements, no bundler hashing.

Images in frontmatter

The images field is an array of paths used for social previews and card layouts:

images:
  - /static/images/twitter-card.svg
  - /static/images/logo.svg

The first entry is typically the one a layout will hand to Open Graph and Twitter card tags.

A word on formats

Prefer SVG for logos and diagrams, and raster formats only for photographs. SVGs stay crisp at any size and compress beautifully, which matters when you care about page weight.

Keeping paths tidy

Decide on one asset directory and stick to it. Scattering images across per-post folders makes them hard to reuse and easy to break during a refactor.

Comments