feat: track images with git lfs

src/components/Image.astro

@@ -0,0 +1,46 @@
+---
+import type { ImageMetadata } from "astro";
+import { Image as AstroImage } from "astro:assets";
+interface Props {
+  src: ImageMetadata;
+  alt: string;
+  maxWidth?: number;
+}
+
+const { src, alt, maxWidth } = Astro.props;
+
+const image = typeof src === "string" ? await import(src) : src;
+
+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}
+  widths={sizes.map((size) => size.width)}
+  sizes={sizes
+    .map((size) => `${size.media || "100vw"} ${size.width}px`)
+    .join(", ")}
+/>
+
+<style>
+  img {
+    border-radius: 0.5rem;
+  }
+</style>