perf: convert development page images to WebP for faster load

src/components/development-pages/dev-grants-page.astro

@@ -1,9 +1,9 @@
 ---
 import { ChevronRight } from "lucide-react";
-import image1 from "../../content/Development_Page/funding-program/card1.png";
-import image2 from "../../content/Development_Page/funding-program/card2.png";
+import image1 from "../../content/Development_Page/funding-program/card1.webp";
+import image2 from "../../content/Development_Page/funding-program/card2.webp";
 
-import image4 from "../../content/Development_Page/funding-program/card4.png";
+import image4 from "../../content/Development_Page/funding-program/card4.webp";
 ---
 
 <div class="not-prose pb-28">

src/components/development-pages/dev-integrations-page.astro

@@ -16,7 +16,7 @@ const getStarted = [
     metaText: "Credit Card.",
     cta: "Explore Deployment API",
     href: "https://akash.network/docs/api-documentation/console-api/",
-    image: "/development/integrations-api.png",
+    image: "/development/integrations-api.webp",
   },
   {
     title: "Akash Blockchain SDK",
@@ -28,7 +28,7 @@ const getStarted = [
     metaText: "AKT or USDC.",
     cta: "Explore Blockchain SDK",
     href: "https://akash.network/docs/api-documentation/sdk/",
-    image: "/development/integrations-sdk.png",
+    image: "/development/integrations-sdk.webp",
   },
   {
     title: "Blockchain REST/RPC",
@@ -40,7 +40,7 @@ const getStarted = [
     metaText: "Use a node endpoint; Console API is indexed data.",
     cta: "Access Node Layer",
     href: "https://akash.network/docs/api-documentation/sdk/",
-    image: "/development/integrations-rpc.png",
+    image: "/development/integrations-rpc.webp",
   },
 ];
 
@@ -93,7 +93,7 @@ const docSections = [
       </p>
     </div>
     <div class="group mt-10 overflow-hidden rounded-xl">
-      <img src="/development/integrations-hero.png" alt="" class="h-[240px] w-full object-cover md:h-[380px] transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
+      <img src="/development/integrations-hero.webp" alt="" class="h-[240px] w-full object-cover md:h-[380px] transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
     </div>
   </section>
 
@@ -138,7 +138,7 @@ const docSections = [
   <section class="mt-20 space-y-10 md:mt-44">
     <div class="grid items-center gap-8 md:gap-16 md:grid-cols-2">
       <div class="group overflow-hidden rounded-xl">
-        <img src="/development/integrations-prime-intellect.png" alt="Prime Intellect" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
+        <img src="/development/integrations-prime-intellect.webp" alt="Prime Intellect" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
       </div>
       <div class="space-y-6">
         <h2 class="font-sans text-3xl !font-medium leading-snug tracking-tight text-foreground md:text-4xl">{caseStudy.name}</h2>
@@ -155,7 +155,7 @@ const docSections = [
   <section class="mt-20 md:mt-44">
     <div class="grid items-center gap-8 md:gap-16 md:grid-cols-2">
       <div class="group order-1 overflow-hidden rounded-xl md:order-2">
-        <img src="/development/integrations-flock.png" alt="FLock.io" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
+        <img src="/development/integrations-flock.webp" alt="FLock.io" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
       </div>
       <div class="order-2 space-y-6 md:order-1">
         <h2 class="font-sans text-3xl !font-medium leading-snug tracking-tight text-foreground md:text-4xl">Decentralized AI Model Training on Akash With FLock.io</h2>

src/components/development-pages/dev-portal-page.astro

@@ -111,7 +111,7 @@ const programs = [
     tagline: "Your GPU bill shouldn't eat your seed round. Access H100s from $1.45/hr with zero sales calls or waitlists.",
     cta: "Learn More",
     href: "/development/startups/",
-    image: "/development/portal-startups.png",
+    image: "/development/portal-startups.webp",
     grayscale: true,
   },
   {
@@ -120,7 +120,7 @@ const programs = [
     tagline: "If the models are open, the compute must be too. Power your next breakthrough on the marketplace built for researchers.",
     cta: "Learn More",
     href: "/development/universities/",
-    image: "/development/portal-universities.png",
+    image: "/development/portal-universities.webp",
     grayscale: true,
   },
   {
@@ -129,7 +129,7 @@ const programs = [
     tagline: "We invest in the people who build the roads. Developing tools for the open cloud? We fund that.",
     cta: "Learn More",
     href: "/development/funding-program/",
-    image: "/development/portal-grants.png",
+    image: "/development/portal-grants.webp",
     grayscale: false,
   },
 ];
@@ -205,7 +205,7 @@ const govGroups = [
       </a>
     </div>
     <div class="group mt-10 overflow-hidden rounded-xl">
-      <img src="/development/portal-hero.png" alt="" class="h-[240px] w-full object-cover md:h-[380px] grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
+      <img src="/development/portal-hero.webp" alt="" class="h-[240px] w-full object-cover md:h-[380px] grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
     </div>
   </section>
 
@@ -273,7 +273,7 @@ const govGroups = [
         >Explore Integrations<ChevronRight size={14} className="ml-1.5" /></a>
       </div>
       <div class="group order-1 overflow-hidden rounded-xl md:order-2">
-        <img src="/development/portal-integrations.png" alt="" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
+        <img src="/development/portal-integrations.webp" alt="" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
       </div>
     </div>
   </section>
@@ -317,7 +317,7 @@ const govGroups = [
   <section class="space-y-8">
     <div class="grid items-center gap-8 md:gap-16 md:grid-cols-2">
       <div class="group overflow-hidden rounded-xl">
-        <img src="/development/portal-roadmap.png" alt="Akash Roadmap" class="aspect-square w-full object-cover transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
+        <img src="/development/portal-roadmap.webp" alt="Akash Roadmap" class="aspect-square w-full object-cover transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
       </div>
       <div class="space-y-6">
         <div class="space-y-4">
@@ -469,7 +469,7 @@ const govGroups = [
         </ul>
       </div>
       <div class="group overflow-hidden rounded-xl">
-        <img src="/development/portal-involvement.png" alt="" class="aspect-square w-full object-cover transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
+        <img src="/development/portal-involvement.webp" alt="" class="aspect-square w-full object-cover transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
       </div>
     </div>
   </section>

src/components/development-pages/dev-startups-page.astro

@@ -71,7 +71,7 @@ const toolkit = [
       </p>
     </div>
     <div class="group mt-10 overflow-hidden rounded-xl">
-      <img src="/development/startups-hero.png" alt="" class="h-[240px] w-full object-cover md:h-[380px] grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
+      <img src="/development/startups-hero.webp" alt="" class="h-[240px] w-full object-cover md:h-[380px] grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
     </div>
   </section>
 
@@ -99,7 +99,7 @@ const toolkit = [
   <section class="mt-20">
     <div class="grid items-center gap-8 md:gap-16 md:grid-cols-2">
       <div class="group overflow-hidden rounded-xl">
-        <img src="/development/startups-agora.png" alt="Agora Labs" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
+        <img src="/development/startups-agora.webp" alt="Agora Labs" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
       </div>
       <div class="space-y-6">
         <h3 class="font-sans text-3xl !font-medium leading-snug tracking-tight text-foreground md:text-4xl">
@@ -152,7 +152,7 @@ const toolkit = [
         >View Case Study<ChevronRight size={14} className="ml-1.5" /></a>
       </div>
       <div class="group overflow-hidden rounded-xl">
-        <img src="/development/startups-passage.png" alt="Passage" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
+        <img src="/development/startups-passage.webp" alt="Passage" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
       </div>
     </div>
   </section>

src/components/development-pages/dev-universities-page.astro

@@ -79,7 +79,7 @@ const carouselImages = [
       </p>
     </div>
     <div class="group mt-10 overflow-hidden rounded-xl">
-      <img src="/development/universities-hero.png" alt="" class="h-[240px] w-full object-cover md:h-[380px] transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
+      <img src="/development/universities-hero.webp" alt="" class="h-[240px] w-full object-cover md:h-[380px] transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
     </div>
   </section>
 
@@ -119,7 +119,7 @@ const carouselImages = [
   <section class="mt-20 md:mt-44">
     <div class="grid items-center gap-8 md:gap-16 md:grid-cols-2">
       <div class="group overflow-hidden rounded-xl">
-        <img src="/development/universities-video.png" alt="Decentralized AI talk" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
+        <img src="/development/universities-video.webp" alt="Decentralized AI talk" class="aspect-square w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-[1.03] group-hover:brightness-105" />
       </div>
       <div class="space-y-6">
         <h3 class="font-sans text-3xl !font-medium leading-snug tracking-tight text-foreground md:text-4xl">
@@ -166,7 +166,7 @@ const carouselImages = [
         </div>
       </div>
       <div class="group order-1 overflow-hidden rounded-xl md:order-2">
-        <img src="/development/universities-program.png" alt="Akash Student Ambassador Program" class="aspect-square w-full object-cover transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
+        <img src="/development/universities-program.webp" alt="Akash Student Ambassador Program" class="aspect-square w-full object-cover transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-105" />
       </div>
     </div>
   </section>