updated to astro v3

removed image integration in favor of native image processing
removed export image from mdx to url
various fixes

src/components/AstroImage.astro

@@ -1,15 +1,44 @@
 ---
-import { Picture } from "@astrojs/image/components";
+import { Image, getImage } from "astro:assets";
 
 const { src, alt, width, height, ...attrs } = Astro.props;
+
+// if h/w attributes are declared, use them. If not, use from the source file
+const imgHeight = height ? height : src.height;
+const imgWidth = width ? width : src.width;
+
+// compute avif and webp format in order to use inside a <picture> element
+const imgAvif = await getImage({
+	src: src,
+	format: "avif",
+	width: Number(imgWidth),
+	height: Number(imgHeight),
+});
+const imgWebp = await getImage({
+	src: src,
+	format: "webp",
+	width: Number(imgWidth),
+	height: Number(imgHeight),
+});
 ---
 
-<Picture
-	src={src}
-	widths={[320, 640, 768]}
-	aspectRatio={`${width}:${height}`}
-	sizes={`(max-inline-size: ${width}px) 100vw, ${width}px`}
-	formats={["avif", "webp"]}
-	alt={alt ? alt : ""}
-	{...attrs}
-/>
+<picture>
+	<source
+		srcset={imgAvif.src}
+		sizes={`(max-inline-size: ${imgWidth}px) 100vw, ${imgHeight}px`}
+		type="image/avif"
+	/>
+	<source
+		srcset={imgWebp.src}
+		sizes={`(max-inline-size: ${imgWidth}px) 100vw, ${imgHeight}px`}
+		type="image/webp"
+	/>
+	<Image
+		src={src}
+		width={Number(imgWidth)}
+		height={Number(imgHeight)}
+		format="jpg"
+		alt={alt ? alt : ""}
+		{...attrs}
+	/>
+</picture>