Astro + eleventy-img

Image.astro

---
import Image from "@11ty/eleventy-img"
import { generateImage } from "utils.ts"
import { Markdown } from "astro/components"
const {
  src,
  alt,
  caption,
  options = {},
  sizes = "",
  classes = undefined,
  quality = 90,
} = Astro.props
const { url } = Astro.request

const image = generateImage(
  // If our URL starts with a slash, let's assume the user know what they're doing and not alter the URL apart from the content prefix
  src.startsWith("/") ? "src/content" + src : "src/content" + url.pathname + "/" + src,
  Object.assign(options, {
    widths: [null],
    formats: ["avif", "webp", "png"],
    sharpWebpOptions: {
      quality: quality,
    },
    sharpAvifOptions: {
      quality: quality,
    },
  }),
  false,
)

const imageAttributes = {
  alt: alt,
  sizes: sizes,
  loading: "lazy",
  decoding: "async",
}

const html = Image.generateHTML(image, imageAttributes)
const props: Record<string, string> = {}
props.class ??= classes
---

<figure {...props}>
  {html}
  {caption && (
    <figcaption>
      <Markdown>{caption}</Markdown>
    </figcaption>
  )}
</figure>

utils.ts

import Image from "@11ty/eleventy-img"

export function generateImage(
  src: string,
  options,
  addBasePath = true,
): Record<string, ImageFormat[]> {
  const settings = Object.assign(options, {
    outputDir: "public/assets/images",
    urlPath: "/assets/images",
  })
  src = (addBasePath ? "src/assets" : "") + src
  ;(async () => {
    await Image(src, settings)
  })()

  return Image.statsSync(src, settings)
}

export interface ImageFormat {
  format: string
  width: number
  height: number
  filename: string
  outputPath: string
  url: string
  sourceType: string
  srcset: string
  size: number
}

yuuup i screwed up. the code works beautifully! thank you @Princesseuh !