new hero picture dimensions

apps/website/src/components/Avatar.astro

@@ -1,13 +1,14 @@
 ---
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 const { image, name, company, role } = Astro.props;
 ---
 
 <div class="flex gap-3 col-span-2">
-  <Picture
+  <Image
     src={image.default}
     alt={name}
-    widths={[72]}
+    width={72}
+    height={72}
     class="h-[72px] w-[72px]"
   />
   <span class="text-xl leading-7">

apps/website/src/components/BookACallForm.astro

@@ -3,7 +3,7 @@ import CalcomEmbedInline from "../components/CalcomEmbedInline.astro";
 import { grid_classes } from "./_grid";
 import Pill from "./Pill.astro";
 import Section from "./Section.astro";
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import meetingImage from "../assets/meeting-croc.png";
 ---
 
@@ -15,11 +15,12 @@ import meetingImage from "../assets/meeting-croc.png";
   <div
     class="col-span-6 md:col-span-8 md:col-start-3 -translate-y-1/2 -mb-40 xl:col-span-6 xl:col-start-4 lg:-mb-60"
   >
-    <Picture
+    <Image
       class="object-cover xl:p-6"
       src={meetingImage}
       alt=""
-      widths={[636, 626, 398]}
+      widths={[320, 480, 640, 800]}
+      sizes="(max-width: 767px) 100vw, (max-width: 1279px) 67vw, 50vw"
       loading="lazy"
     />
   </div>

apps/website/src/components/ServiceCard.astro

@@ -1,6 +1,6 @@
 ---
 import classnames from "classnames";
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 
 interface Props {
   idx: number;
@@ -75,11 +75,12 @@ const image = await src();
       <div
         class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2"
       >
-        <Picture
+        <Image
           class="object-cover xl:p-6"
           src={image.default}
           alt={imgAlt}
-          widths={[578]}
+          widths={[320, 480, 578]}
+          sizes="(max-width: 1023px) 100vw, 50vw"
           loading="lazy"
         />
       </div>

apps/website/src/components/ValueCard.astro

@@ -1,5 +1,5 @@
 ---
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 
 interface Props {
   idx: number;
@@ -36,11 +36,12 @@ const image = await src();
     </div>
   </div>
   <div class="flex justify-center">
-    <Picture
+    <Image
       class="mt-auto max-w-[466px] w-full"
       src={image.default}
       alt={img.alt}
-      widths={[466, 342, 312]}
+      widths={[320, 400, 466]}
+      sizes="(max-width: 767px) 100vw, (max-width: 1279px) 100vw, 33vw"
       loading="lazy"
     />
   </div>

apps/website/src/components/cto/Hero.astro

@@ -2,7 +2,7 @@
 import { grid_classes } from "../_grid";
 import Pill from "../Pill.astro";
 import Section from "../Section.astro";
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import heroImage from "../../assets/cto-hero.png";
 ---
 
@@ -57,10 +57,11 @@ import heroImage from "../../assets/cto-hero.png";
       lg:col-start-7
       lg:row-start-1"
     >
-      <Picture
+      <Image
         src={heroImage}
         alt="CroCoder Hero Image"
-        widths={[1412, 626, 470, 398]}
+        widths={[320, 480, 640, 800]}
+        sizes="(max-width: 767px) 100vw, (max-width: 1023px) 100vw, 50vw"
         loading="eager"
       />
     </div>

apps/website/src/components/hero.astro

@@ -2,7 +2,7 @@
 import { grid_classes } from "./_grid";
 import Pill from "./Pill.astro";
 import Section from "./Section.astro";
-import { Picture } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 import heroImage from "../assets/croco-13.png";
 ---
 
@@ -13,10 +13,11 @@ import heroImage from "../assets/croco-13.png";
     <div
       class="col-start-3 col-span-4 md:col-start-6 md:col-span-7 xl:col-start-7 xl:col-span-6 rounded-bl-lg"
     >
-      <Picture
+      <Image
         src={heroImage}
         alt="CroCoder Hero Image"
-        widths={[1196, 598, 553, 292]}
+        widths={[320, 480, 640, 800]}
+        sizes="(max-width: 767px) calc(67vw - 21px), (max-width: 1279px) calc(58vw - 32px), calc(50vw - 28px)"
         loading="eager"
         fetchpriority="high"
       />

apps/website/src/layouts/post-base.astro

@@ -1,7 +1,7 @@
 ---
 import Base from "../layouts/base-blog.astro";
 import Head from "../layouts/head.astro";
-import { Picture } from "astro:assets";
+import { Image } from "astro:assets";
 import { markdownify } from "../ify";
 import { getCollection } from "astro:content";
 import formatDate from "../format-date";
@@ -67,14 +67,15 @@ const dateObj = new Date(createdAt);
         <div class="col-12 mt-8 mb-8">
           {
             image && (
-              <Picture
+              <Image
                 src={image}
-                height={500}
-                width={1000}
+                widths={[320, 480, 640, 800, 1000]}
+                sizes="(max-width: 767px) 100vw, 1000px"
                 alt={title}
                 class="rounded-lg"
                 loading="eager"
                 decoding="auto"
+                inferSize={true}
               />
             )
           }
@@ -94,13 +95,14 @@ const dateObj = new Date(createdAt);
             >
               {
                 authorImage && (
-                  <Picture
+                  <Image
                     src={authorImage}
-                    width={215}
-                    height={215}
+                    widths={[155, 215]}
+                    sizes="(max-width: 767px) 155px, 215px"
                     alt={title}
                     loading="lazy"
                     decoding="auto"
+                    inferSize={true}
                     class={
                       "max-w-none h-[100px] w-[155px] md:h-[140px] md:w-[215px]"
                     }
@@ -131,13 +133,13 @@ const dateObj = new Date(createdAt);
               <a class="flex flex-col gap-4" href={url}>
                 <div class="overflow-hidden rounded-lg">
                   {image && (
-                    <Picture
+                    <Image
                       src={image}
                       alt={title}
-                      width={300}
-                      height={200}
-                      inferSize={true}
+                      widths={[200, 300]}
+                      sizes="(max-width: 767px) 100vw, 33vw"
                       loading="lazy"
+                      inferSize={true}
                       decoding="auto"
                     />
                   )}

apps/website/src/pages/blog/index.astro

@@ -1,7 +1,7 @@
 ---
 import Base from "../../layouts/base-blog.astro";
 import { getCollection } from "astro:content";
-import { Picture } from "astro:assets";
+import { Image } from "astro:assets";
 import formatDate from "../..//format-date";
 import Meta from "../../layouts/base-meta-tags.astro";
 
@@ -62,13 +62,14 @@ posts.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
                 <a class="flex flex-col gap-4" href={url}>
                   <div class="overflow-hidden rounded-lg">
                     {image && (
-                      <Picture
+                      <Image
                         src={image}
                         alt={title}
-                        width={936}
-                        height={528}
+                        widths={[320, 480, 640, 936]}
+                        sizes={i === 0 ? "(max-width: 639px) 100vw, 936px" : "(max-width: 639px) 100vw, 50vw"}
                         loading={i < 3 ? "eager" : "lazy"}
                         decoding="auto"
+                        inferSize={true}
                       />
                     )}
                   </div>