perf: Implement Astro Image component with WebP optimization

- Replace img tags with Astro Image component across all pages
- Add WebP format support for better compression
- Specify width and height for proper aspect ratios
- Maintain lazy loading and async decoding
- Improve Core Web Vitals with optimized images
- Reduce bundle size with modern image formats

Author: RichLewis007

src/components/ProjectCard.astro

@@ -1,4 +1,6 @@
 ---
+import { Image } from "astro:assets";
+
 interface Props {
   title: string;
   category: string;
@@ -28,12 +30,15 @@ const colorClass = categoryColors[category] || "bg-gray-500";
   class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 hover:-translate-y-1"
 >
   <div class="relative h-48 overflow-hidden">
-    <img
+    <Image
       src={image}
       alt={title}
       class="w-full h-full object-cover"
       loading="lazy"
       decoding="async"
+      width={400}
+      height={300}
+      format="webp"
     />
     <span
       class={`absolute top-4 right-4 ${colorClass} text-white px-3 py-1 rounded-full text-sm font-semibold`}

src/pages/about.astro

@@ -2,6 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import Navigation from "../components/Navigation.astro";
 import Footer from "../components/Footer.astro";
+import { Image } from "astro:assets";
 ---
 
 <Layout
@@ -48,12 +49,15 @@ import Footer from "../components/Footer.astro";
             </p>
           </div>
           <div class="relative">
-            <img
+            <Image
               src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&h=600&fit=crop"
               alt="Makers working together"
               class="rounded-2xl shadow-2xl"
               loading="lazy"
               decoding="async"
+              width={800}
+              height={600}
+              format="webp"
             />
           </div>
         </div>

src/pages/blog/getting-started-arduino.astro

@@ -2,6 +2,7 @@
 import Layout from "../../layouts/Layout.astro";
 import Navigation from "../../components/Navigation.astro";
 import Footer from "../../components/Footer.astro";
+import { Image } from "astro:assets";
 ---
 
 <Layout
@@ -45,12 +46,15 @@ import Footer from "../../components/Footer.astro";
       </div>
 
       <!-- Featured Image -->
-      <img
+      <Image
         src="https://images.unsplash.com/photo-1553406830-ef2513450d76?w=1200&h=600&fit=crop"
         alt="Arduino Board"
         class="w-full rounded-2xl shadow-2xl mb-12"
         loading="lazy"
         decoding="async"
+        width={1200}
+        height={600}
+        format="webp"
       />
 
       <!-- Article Content -->

src/pages/blog/index.astro

@@ -2,6 +2,7 @@
 import Layout from "../../layouts/Layout.astro";
 import Navigation from "../../components/Navigation.astro";
 import Footer from "../../components/Footer.astro";
+import { Image } from "astro:assets";
 
 const blogPosts = [
   {
@@ -179,12 +180,15 @@ const blogPosts = [
         >
           <div class="md:flex">
             <div class="md:w-1/2">
-              <img
+              <Image
                 src={blogPosts[0].image}
                 alt={blogPosts[0].title}
                 class="w-full h-64 md:h-full object-cover"
                 loading="lazy"
                 decoding="async"
+                width={600}
+                height={400}
+                format="webp"
               />
             </div>
             <div class="md:w-1/2 p-8">
@@ -244,12 +248,15 @@ const blogPosts = [
           {
             blogPosts.slice(1).map((post) => (
               <article class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all hover:-translate-y-1">
-                <img
+                <Image
                   src={post.image}
                   alt={post.title}
                   class="w-full h-48 object-cover"
                   loading="lazy"
                   decoding="async"
+                  width={400}
+                  height={300}
+                  format="webp"
                 />
                 <div class="p-6">
                   <div class="flex items-center space-x-4 mb-3">

src/pages/donate.astro

@@ -2,6 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import Navigation from "../components/Navigation.astro";
 import Footer from "../components/Footer.astro";
+import { Image } from "astro:assets";
 ---
 
 <Layout
@@ -64,12 +65,15 @@ import Footer from "../components/Footer.astro";
             </ul>
           </div>
           <div class="relative">
-            <img
+            <Image
               src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=800&h=600&fit=crop"
               alt="Community making together"
               loading="lazy"
               decoding="async"
               class="rounded-2xl shadow-2xl"
+              width={800}
+              height={600}
+              format="webp"
             />
           </div>
         </div>

src/pages/store.astro

@@ -2,6 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import Navigation from "../components/Navigation.astro";
 import Footer from "../components/Footer.astro";
+import { Image } from "astro:assets";
 
 const products = [
   {
@@ -173,12 +174,15 @@ const products = [
             products.map((product) => (
               <article class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all hover:-translate-y-1">
                 <div class="relative h-64 overflow-hidden">
-                  <img
+                  <Image
                     src={product.image}
                     alt={product.name}
                     class="w-full h-full object-cover"
                     loading="lazy"
                     decoding="async"
+                    width={400}
+                    height={300}
+                    format="webp"
                   />
                   <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
                     ${product.price}
@@ -298,12 +302,15 @@ const products = [
             </div>
           </div>
           <div class="relative">
-            <img
+            <Image
               src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800&h=600&fit=crop"
               alt="MakerFriends community"
               class="rounded-2xl shadow-2xl"
               loading="lazy"
               decoding="async"
+              width={800}
+              height={600}
+              format="webp"
             />
           </div>
         </div>