perf: Enable Astro image optimization for site components

astro.config.mjs

@@ -30,11 +30,6 @@ const redirects = {
 export default defineConfig({
   site: process.env.SITE_URL || 'https://promptless.ai',
   redirects,
-  image: {
-    service: {
-      entrypoint: 'astro/assets/services/noop',
-    },
-  },
   integrations: [
     react(),
     starlight({
@@ -66,6 +61,16 @@ export default defineConfig({
         baseUrl: 'https://github.com/Promptless/docs/tree/main',
       },
       head: [
+        {
+          tag: 'link',
+          attrs: {
+            rel: 'preload',
+            href: '/fonts/InterVariable.woff2',
+            as: 'font',
+            type: 'font/woff2',
+            crossorigin: '',
+          },
+        },
         {
           tag: 'meta',
           attrs: { property: 'og:image', content: 'https://promptless.ai/assets/social-card.png' },

src/components/site/Hero.astro

@@ -1,4 +1,7 @@
 ---
+import { Image } from 'astro:assets';
+import ycLogo from '../../assets/site/yc_logo.svg.png';
+
 interface Props {
   prefix?: string;
   words?: string[];
@@ -38,7 +41,7 @@ const {
 
   <div class="pl-site-trust-row">
     <div class="pl-site-trust-badge">
-      <img src="/site/yc_logo.svg.png" alt="Y Combinator" width="20" height="20" />
+      <Image src={ycLogo} alt="Y Combinator" width={40} height={40} />
       <span>Backed by Y Combinator</span>
     </div>
     <span>Trusted by fast-growing startups and Fortune 500 enterprises alike</span>

src/components/site/HowItWorks.astro

@@ -1,11 +1,20 @@
 ---
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+
+import listenImg from '../../assets/homepage/promptless_1_listen.png';
+import draftImg from '../../assets/homepage/Frame 29 (10).png';
+import draftSecondaryImg from '../../assets/homepage/promptless-2-2.png';
+import reviewImg from '../../assets/site/step_3.png';
+import publishImg from '../../assets/homepage/Frame 35.png';
+
 interface Step {
   id: string;
   label: string;
   description: string;
-  image?: string;
+  image?: ImageMetadata;
   imageAlt?: string;
-  imageSecondary?: string;
+  imageSecondary?: ImageMetadata;
   imageSecondaryAlt?: string;
 }
 
@@ -22,30 +31,30 @@ const defaultSteps: Step[] = [
     id: 'listen',
     label: 'Listen',
     description: 'When a PR opens, a slack thread about docs starts, or a DOC ticket gets created, Promptless automatically wakes up and decides whether it warrants a doc update',
-    image: '/assets/promptless_1_listen.png',
+    image: listenImg,
     imageAlt: 'Step 1: Listen - Connect to Github, Slack, and Linear',
   },
   {
     id: 'draft',
     label: 'Draft',
     description: 'Promptless does research across the context you connect it to, and proactively notifies you when there\'s a documentation suggestion.',
-    image: '/assets/Frame%2029%20(10).png',
+    image: draftImg,
     imageAlt: 'Step 2: Draft - Promptless notifies you proactively with suggestions',
-    imageSecondary: '/assets/promptless-2-2.png',
+    imageSecondary: draftSecondaryImg,
     imageSecondaryAlt: 'Step 2: additional Promptless draft screenshot',
   },
   {
     id: 'review',
     label: 'Review',
     description: 'Review citations, provide feedback, or edit suggestions inline.',
-    image: '/site/step_3.png',
+    image: reviewImg,
     imageAlt: 'Step 3: Review - review citations, feedback, and inline edits',
   },
   {
     id: 'publish',
     label: 'Publish',
     description: 'Open PRs or deploy directly to your docs provider.',
-    image: '/assets/Frame%2035.png',
+    image: publishImg,
     imageAlt: 'Step 4: Publish - open PRs or deploy directly to your docs provider',
   },
 ];
@@ -72,11 +81,11 @@ const {
           {step.image ? (
             <>
               <div class="pl-site-step-surface">
-                <img src={step.image} alt={step.imageAlt ?? step.label} loading="lazy" />
+                <Image src={step.image} alt={step.imageAlt ?? step.label} loading="lazy" width={616} />
               </div>
               {step.imageSecondary ? (
                 <div class="pl-site-step-surface pl-site-step-surface-secondary">
-                  <img src={step.imageSecondary} alt={step.imageSecondaryAlt ?? `${step.label} additional image`} loading="lazy" />
+                  <Image src={step.imageSecondary} alt={step.imageSecondaryAlt ?? `${step.label} additional image`} loading="lazy" width={616} />
                 </div>
               ) : null}
             </>

src/components/site/Testimonials.astro

@@ -1,11 +1,22 @@
 ---
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+
+import mannyImg from '../../assets/site/manny.jpeg';
+import alanImg from '../../assets/site/alan.jpeg';
+import moImg from '../../assets/site/mo.jpeg';
+import aaronImg from '../../assets/site/aaron.jpeg';
+import eduardoImg from '../../assets/site/eduardo.jpeg';
+import nicholasImg from '../../assets/site/nicholas.jpeg';
+import docDetectiveLogo from '../../assets/site/logos/doc-detective.png';
+
 interface Testimonial {
   quote: string;
   author: string;
   title: string;
   company: string;
-  companyLogo: string;
-  image: string;
+  companyLogo: ImageMetadata | string;
+  image: ImageMetadata;
 }
 
 interface Props {
@@ -19,8 +30,8 @@ const defaultItems: Testimonial[] = [
     author: 'Manny Silva',
     title: 'Creator',
     company: 'Doc Detective',
-    companyLogo: '/site/logos/doc-detective.png',
-    image: '/site/manny.jpeg',
+    companyLogo: docDetectiveLogo,
+    image: mannyImg,
   },
   {
     quote:
@@ -29,7 +40,7 @@ const defaultItems: Testimonial[] = [
     title: 'Senior Technical Writer',
     company: 'Runpod',
     companyLogo: '/site/logos/runpod.png',
-    image: '/site/mo.jpeg',
+    image: moImg,
   },
   {
     quote:
@@ -38,7 +49,7 @@ const defaultItems: Testimonial[] = [
     title: 'Docs Maintainer',
     company: 'Bazel',
     companyLogo: '/site/logos/bazel-icon.png',
-    image: '/site/alan.jpeg',
+    image: alanImg,
   },
   {
     quote:
@@ -47,23 +58,23 @@ const defaultItems: Testimonial[] = [
     title: 'Founding Solutions Engineer',
     company: 'Vellum',
     companyLogo: '/site/logos/vellum-icon.svg',
-    image: '/site/aaron.jpeg',
+    image: aaronImg,
   },
   {
     quote: 'I love your product. It works incredibly well and basically pays for itself right away.',
     author: 'Eduardo Soubihe',
     title: 'CTO',
     company: 'Latitude.sh',
     companyLogo: '/site/logos/latitude.svg',
-    image: '/site/eduardo.jpeg',
+    image: eduardoImg,
   },
   {
     quote: "Promptless is a solo tech writer's godsend.",
     author: 'Nicholas DeWald',
     title: 'Head of Developer Docs',
     company: 'Prove',
     companyLogo: '/site/logos/prove-icon.svg',
-    image: '/site/nicholas.jpeg',
+    image: nicholasImg,
   },
 ];
 
@@ -79,15 +90,19 @@ const { items = defaultItems } = Astro.props;
           <p class="pl-site-testimonial-quote">{item.quote}</p>
           <div class="pl-site-testimonial-footer">
             <div class="pl-site-testimonial-person">
-              <img src={item.image} alt={item.author} loading="lazy" width="40" height="40" />
+              <Image src={item.image} alt={item.author} loading="lazy" width={80} height={80} />
               <div class="pl-site-testimonial-meta">
                 <p class="pl-site-testimonial-author">{item.author}</p>
                 <p class="pl-site-testimonial-title">{item.title}</p>
                 <p class="pl-site-testimonial-employer">{item.company}</p>
               </div>
             </div>
             <div class="pl-site-testimonial-company">
-              <img src={item.companyLogo} alt={`${item.company} logo`} loading="lazy" />
+              {typeof item.companyLogo === 'string' ? (
+                <img src={item.companyLogo} alt={`${item.company} logo`} loading="lazy" />
+              ) : (
+                <Image src={item.companyLogo} alt={`${item.company} logo`} loading="lazy" width={40} height={40} />
+              )}
             </div>
           </div>
         </blockquote>