website/src/components/Image.astro

---
import type { ImageMetadata } from "astro";
import { Picture as AstroImage } from "astro:assets";
interface Props {
  src: ImageMetadata;
  alt: string;
  class?: string;
  caption?: string;
  maxWidth?: number;
}

const { src: image, alt, maxWidth } = Astro.props;

console.log({ image, alt, maxWidth });

const sizes = [
  {
    width: 240,
    media: "(max-width: 360px)",
  },
  {
    width: 540,
    media: "(max-width: 720px)",
  },
  {
    width: 720,
    media: "(max-width: 1600px)",
  },
  {
    width: image.width,
  },
].filter((size) => !maxWidth || size.width <= maxWidth);
---

<AstroImage
  src={image}
  alt={alt}
  class={Astro.props.class}
  widths={sizes.map((size) => size.width)}
  sizes={sizes
    .map((size) => `${size.media || "100vw"} ${size.width}px`)
    .join(", ")}
/>