Image to be optiized with Vercel

apps/website/astro.config.mjs

@@ -1,8 +1,9 @@
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import react from '@astrojs/react';
-import vercel from '@astrojs/vercel/static';
+import vercel from '@astrojs/vercel/serverless'
 import createRemarkPlugin from '@crocoder-dev/remark-plugin';
+import image from '@astrojs/image';
 
 const classes = {
   titleClass: 'font-bold text-[1.25rem] mt-[2.5rem]',
@@ -15,19 +16,14 @@ const remarkPlugin = createRemarkPlugin(classes);
 
 export default defineConfig({
   prefetch: true,
-  output: 'static',
+  output: 'server',
   adapter: vercel({
-    imageService: true,
-    imagesConfig: {
-      sizes: [640, 936],
-      domains: ['*'],
-    },
   }),
   redirects: {
     '/feed': '/rss.xml',
     '/sitemap': '/sitemap.xml'
   },
-  integrations: [tailwind(), react()],
+  integrations: [tailwind(), react(), image()],
   markdown: {
     remarkPlugins: [remarkPlugin],
   },

apps/website/package.json

@@ -3,21 +3,22 @@
   "module": "index.ts",
   "type": "module",
   "dependencies": {
+    "@astrojs/image": "^0.18.0",
     "@astrojs/react": "^4.1.2",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/tailwind": "^6.0.2",
-    "@astrojs/vercel": "^8.0.1",
+    "@astrojs/vercel": "^8.1.5",
+    "@crocoder-dev/remark-plugin": "*",
     "@crocoder-dev/tailwind": "*",
     "astro": "5.7.13",
     "astro-font": "^1.1.0",
     "classnames": "^2.5.1",
-    "react-icons": "^5.4.0",
-    "@crocoder-dev/remark-plugin": "*",
     "date-fns": "^4.1.0",
     "marked": "^15.0.5",
+    "posthog-js": "^1.222.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "posthog-js": "^1.222.0"
+    "react-icons": "^5.4.0"
   },
   "scripts": {
     "dev": "astro dev --port 4321",

apps/website/src/components/Avatar.astro

@@ -1,9 +1,15 @@
 ---
-const { imagePath, name, company, role } = Astro.props;
+import { Picture } from "@astrojs/image/components";
+const { image, name, company, role } = Astro.props;
 ---
 
 <div class="flex gap-3 col-span-2">
-  <img src={imagePath} class="h-[72px] w-[72px]" />
+  <Picture
+    src={image.default}
+    alt={name}
+    widths={[72]}
+    class="h-[72px] w-[72px]"
+  />
   <span class="text-xl leading-7">
     <strong>{name}</strong><br />
     <span class="underline">{company}</span>

apps/website/src/components/BookACallForm.astro

@@ -3,6 +3,8 @@ 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 meetingImage from "../assets/meeting-croc.png";
 ---
 
 <!-- YELLOW-1 = #FEB534 -->
@@ -13,7 +15,13 @@ import Section from "./Section.astro";
   <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"
   >
-    <img src="/meeting-croc.png" class="object-cover xl:p-6" />
+    <Picture
+      class="object-cover xl:p-6"
+      src={meetingImage}
+      alt=""
+      widths={[636, 626, 398]}
+      loading="lazy"
+    />
   </div>
   <div
     id="book-a-call-section"

apps/website/src/components/CalcomEmbedInline.astro

@@ -27,6 +27,7 @@ const {
     eventType,
   }}
 >
+const loadCalEmbed = () => {
   (function (C, A, L) {
     let p = function (a, ar) {
       a.q.push(ar);
@@ -90,4 +91,11 @@ const {
     hideEventTypeDetails,
     layout,
   });
+}
+
+if ("requestIdleCallback" in window) {
+ requestIdleCallback(loadCalEmbed);
+} else {
+  window.addEventListener("load", loadCalEmbed);
+}
 </script>

apps/website/src/components/Section.astro

@@ -3,19 +3,21 @@ interface Props {
   idx?: string;
   className?: string;
   contentClassName?: string;
+  style?: string;
 }
 
-const { idx, className, contentClassName } = Astro.props;
+const { idx, className, contentClassName, style } = Astro.props;
 ---
 
 <section
   id={idx}
   class={`
    w-full
-   px-4 sm:px-7 
-   py-12  lg:py-16 
+   px-4 sm:px-7
+   py-12  lg:py-16
    overflow-hidden
    ${className} `}
+  style={style}
 >
   <div
     class={`max-w-[100vw] md:max-w-[var(--max-width)] m-auto  ${contentClassName}`}

apps/website/src/components/ServiceCard.astro

@@ -1,5 +1,6 @@
 ---
 import classnames from "classnames";
+import { Picture } from "@astrojs/image/components";
 
 interface Props {
   idx: number;
@@ -12,8 +13,15 @@ interface Props {
   classNames?: string | string[];
 }
 
-const { idx, title, content, styles, imgPath, imgAlt, iconPath, classNames } =
+const { title, content, styles, imgPath, imgAlt, iconPath, classNames } =
   Astro.props;
+
+const images = import.meta.glob("../assets/*.*");
+const src = images[`../assets${imgPath}`] as any as () => Promise<{
+  default: ImageMetadata;
+}>;
+
+const image = await src();
 ---
 
 <div
@@ -29,7 +37,7 @@ const { idx, title, content, styles, imgPath, imgAlt, iconPath, classNames } =
     h-[710px]
     overflow-hidden
     `,
-    styles
+    styles,
   )}
 >
   <section
@@ -50,7 +58,7 @@ const { idx, title, content, styles, imgPath, imgAlt, iconPath, classNames } =
       lg:grid-rows-[min-content_auto]
       backdrop-blur-[15px]
       `,
-      classNames
+      classNames,
     )}
   >
     <div
@@ -67,7 +75,13 @@ const { idx, title, content, styles, imgPath, imgAlt, iconPath, classNames } =
       <div
         class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2"
       >
-        <img src={imgPath} alt={imgAlt} />
+        <Picture
+          class="object-cover xl:p-6"
+          src={image.default}
+          alt={imgAlt}
+          widths={[578]}
+          loading="lazy"
+        />
       </div>
       <div
         class="flex flex-col lg:flex-col row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:leading-[26px] md:[&_p]:text-[22px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"

apps/website/src/components/ValueCard.astro

@@ -1,4 +1,6 @@
 ---
+import { Picture } from "@astrojs/image/components";
+
 interface Props {
   idx: number;
   title: string;
@@ -13,6 +15,14 @@ interface Props {
 }
 
 const { title, content, img, styles, onDark, icon } = Astro.props;
+
+
+const images = import.meta.glob("../assets/*.*");
+const src = images[`../assets${img.path}`] as any as () => Promise<{
+  default: ImageMetadata;
+}>;
+
+const image = await src();
 ---
 
 <section
@@ -26,6 +36,12 @@ const { title, content, img, styles, onDark, icon } = Astro.props;
     </div>
   </div>
   <div class="flex justify-center">
-    <img class="mt-auto max-w-[466px] w-full" src={img.path} alt={img.alt} />
+    <Picture
+      class="mt-auto max-w-[466px] w-full"
+      src={image.default}
+      alt={img.alt}
+      widths={[466, 342, 312]}
+      loading="lazy"
+    />
   </div>
 </section>

apps/website/src/components/Values.astro

@@ -5,6 +5,8 @@ import SectionTitle from "./SectionTitle.astro";
 import Section from "./Section.astro";
 import { grid_classes } from "./_grid";
 import Pill from "./Pill.astro";
+import { getImage } from "@astrojs/image";
+import bgImage from "../assets/values-main-image.png";
 
 const styles = ["bg-[#FEB534]", "bg-[#607A1A]", "bg-[#F6FCFD]"];
 
@@ -23,12 +25,20 @@ for (const value of valueCollection) {
     icon: value.data.icon,
   });
 }
+
+const { src } = await getImage({
+  src: bgImage,
+  alt: "",
+  width: 1920,
+  format: 'avif',
+});
 ---
 
 <Section
   idx="values-wrapper"
   contentClassName={grid_classes}
-  className="bg-contrast bg-[url(/values-main-image.png)] bg-no-repeat bg-top bg-[auto_320px]"
+  className="bg-contrast bg-no-repeat bg-top bg-[auto_320px]"
+  style={`background-image: url('${src}');`}
 >
   <div
     class="col-span-6 md:col-span-12 flex flex-col gap-4 pt-[148px] md:pt-48 md:items-center pb-5 md:pb-11 xl:pb-12"

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

@@ -2,6 +2,8 @@
 import { grid_classes } from "../_grid";
 import Pill from "../Pill.astro";
 import Section from "../Section.astro";
+import { Picture } from "@astrojs/image/components";
+import heroImage from "../../assets/cto-hero.png";
 ---
 
 <Section className="!pt-[75px] bg-white md:!pb-12 lg:!pb-24">
@@ -55,7 +57,12 @@ import Section from "../Section.astro";
       lg:col-start-7
       lg:row-start-1"
     >
-      <img src="/cto-hero.png" alt="" class="" />
+      <Picture
+        src={heroImage}
+        alt="CroCoder Hero Image"
+        widths={[1412, 626, 470, 398]}
+        loading="eager"
+      />
     </div>
   </div>
 </Section>

apps/website/src/components/hero.astro

@@ -2,6 +2,8 @@
 import { grid_classes } from "./_grid";
 import Pill from "./Pill.astro";
 import Section from "./Section.astro";
+import { Picture } from "@astrojs/image/components";
+import heroImage from "../assets/croco-13.png";
 ---
 
 <Section className="!py-0 !px-0">
@@ -11,7 +13,12 @@ import Section from "./Section.astro";
     <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"
     >
-      <img src="/croco-13.png" alt="" class="" />
+      <Picture
+        src={heroImage}
+        alt="CroCoder Hero Image"
+        widths={[1196, 598, 553, 292]}
+        loading="eager"
+      />
     </div>
     <div
       class="text-white my-auto
@@ -39,7 +46,9 @@ import Section from "./Section.astro";
       <h1
         class="font-normal text-[32px] leading-9 md:text-[54px] md:leading-[60px] tracking-tight"
       >
-        <span class="fadeInUp" style="animation-delay: 100ms;">Building Software</span>
+        <span class="fadeInUp" style="animation-delay: 100ms;"
+          >Building Software</span
+        >
         <span
           class="fadeInUp"
           style="animation-delay: 500ms;animation-fill-mode: backwards;"
@@ -54,7 +63,8 @@ import Section from "./Section.astro";
           class="fadeInUp"
           style="animation-delay: 900ms;animation-fill-mode: backwards;"
         >
-          A web development consultancy delivering scalable solutions that drive real business impact.
+          A web development consultancy delivering scalable solutions that drive
+          real business impact.
         </span>
       </div>
       <div class="flex flex-col sm:flex-row gap-[10px]">

apps/website/src/components/testimonial.astro

@@ -9,12 +9,24 @@ const testimonialCollections = await getCollection("testimonials");
 
 const testimonials = [];
 
+const images = import.meta.glob("../assets/*.*");
+
+console.log(images);
+
 for (const testimonial of testimonialCollections) {
+  console.log(testimonial.data.imageUrl);
+  const src = images[
+    `../assets${testimonial.data.imageUrl}`
+  ] as any as () => Promise<{
+    default: ImageMetadata;
+  }>;
+  const image = await src();
+
   testimonials.push({
     content: testimonial.rendered,
     name: testimonial.data.name,
     title: testimonial.data.title,
-    imageUrl: testimonial.data.imageUrl,
+    image: image,
     company: testimonial.data.company,
   });
 }
@@ -34,14 +46,14 @@ for (const testimonial of testimonialCollections) {
   xl:flex-wrap xl:justify-between xl:overflow-hidden"
   >
     {
-      testimonials.map(({ name, content, title, imageUrl, company }) => (
+      testimonials.map(({ name, content, title, image, company }) => (
         <article class="flex-1 bg-[#F4F4F4] rounded-2xl p-7 min-w-[318px] md:min-w-[474px] xl:min-w-0 max-h-fit max-w-full [&_p]:leading-7 [&_p]:text-black [&_p]:w-full">
           <p set:html={content?.html} class="text-base leading-[26px]" />
           <div class="pt-7">
             <Avatar
               name={name}
               role={title}
-              imagePath={imageUrl}
+              image={image}
               company={company}
             />
           </div>

apps/website/src/content/testimonials/2paul-jeszensky.md

@@ -1,5 +1,5 @@
 ---
-imageUrl: "/Paul-Jeszenszky.png"
+imageUrl: "/paul-jeszenszky.png"
 name: "Paul Jeszenszky"
 title: "co-founder & CEO"
 company: "Submix"