← Blog

Images in Articles

Demonstrating Astro 5's built-in image optimization with co-located images.

  • demo
  • images
A hero image demonstrating the cover image feature

This article demonstrates the coverImage feature added to X1’s article schema.

How it works

Images are co-located next to their markdown file and referenced with a relative path in frontmatter:

coverImage: ./my-hero.jpg
coverImageAlt: "Description of the image"

Astro 5’s built-in Sharp pipeline handles optimization at build time — no extra packages required.

Benefits

  • Automatic optimization — images are resized, converted to modern formats, and fingerprinted
  • Core Web Vitals — the hero image uses loading="eager" since it’s a likely LCP element
  • OpenGraph — the cover image is automatically used as the og:image meta tag
  • Accessible — thumbnail images in listing cards use aria-hidden since the title link already announces the destination

Inline illustrations

Body images work just like standard Markdown — use a relative path and Astro’s build pipeline picks them up automatically:

An inline illustration showing the image optimization pipeline

From: Unsplash

The image above is processed by Sharp at build time: it is resized, converted to the most efficient format the browser supports, and given a content-hash filename for long-lived caching.