Images

Where images live

• Source assets: /src/assets/images/ (recommended for anything you want to optimise).
• Public: /public/images/ (served as-is; useful for textures and non-optimised assets).

Responsive images (recommended)

For responsive images, load an image from /src/assets/images/ (via getImage) and render it using Astro’s Image component.

Example

---
import { Image } from 'astro:assets';
import { getImage, imageSizes } from '../../utils/images';

const hero = await getImage('example.jpg');
---

{hero ? (
  <Image
    src={hero}
    alt="Descriptive alt text"
    {...imageSizes.hero}
  />
) : (
  <img src="/images/example.jpg" alt="Descriptive alt text" />
)}

The getImage helper

getImage lives in /src/utils/images.ts and resolves a filename to ImageMetadata using a build-time glob.

Notes

• It matches by filename (not the full folder path), so keep filenames unique.
• It logs a warning in development if an image cannot be found.

Example

import { getImage } from '../utils/images';

const img = await getImage('my-image.png');

Size presets

The imageSizes export provides a consistent set of widths and sizes strings for common use cases.

Available presets

• thumbnail
• card
• twoColumn
• hero
• serviceIcon

Example

<Image src={img} alt="..." {...imageSizes.card} />

Content collection images

Some content collections validate image fields using Astro’s image() schema helper (see /src/content/config.ts). These fields resolve to ImageMetadata, which you can pass directly to <Image />.

Example

<Image src={entry.data.heroImage} alt="..." {...imageSizes.hero} />

When to use a plain img tag

• Textures and background images (often live under /public/images/).
• When you need a hard-coded URL and optimisation is not required.
• As a fallback when getImage returns null.