better image generation

blog/src/components/PostPreviewLarge.astro

@@ -1,6 +1,7 @@
 ---
 import type { Post } from "../types/global";
 import { findImageByPath } from "../lib/findImage";
+import { Image } from "astro:assets";
 
 interface Props {
   post: Post;
@@ -15,7 +16,11 @@ const img = findImageByPath(post.image.path);
 <a href={url} class="no-link-link">
   <div class="wide-container">
     <div class="image-col col rounded">
-      <img src={img.src} alt={post.image.alt} />
+      <Image
+        src={img}
+        alt={post.image.alt}
+        layout="constrained"
+      />
     </div>
     <div class="text-col col">
       <div class="top-info">

blog/src/layouts/BlogPostLayout.astro

@@ -1,4 +1,5 @@
 ---
+import { Image } from "astro:assets";
 import BackNav from "../components/BackNav.astro";
 import { findImageByPath } from "../lib/findImage";
 import type { Post } from "../types/global";
@@ -15,9 +16,9 @@ const titleImg = findImageByPath(frontmatter.image.path);
 
 <Main>
   <article>
-    <img
+    <Image
       id="titleImg"
-      src={titleImg.src}
+      src={titleImg}
       alt={frontmatter.image.alt}
       class="rounded"
     />