feat: images locales avec composant Image Astro (WebP auto-optimisé)

src/components/About.astro

@@ -1,3 +1,8 @@
+---
+import { Image } from 'astro:assets';
+import gallery1 from '../assets/images/gallery_1.jpg';
+---
+
 <section id="about" class="py-32 scroll-mt-20">
   <div class="max-w-6xl mx-auto px-6">
     <div class="grid md:grid-cols-2 gap-16 items-center">
@@ -35,8 +40,8 @@
       </div>
 
       <div class="relative">
-        <img
+        <Image
-          src="/src/assets/images/facade.jpg"
+          src={gallery1}
           alt="Intérieur du gîte"
           class="w-full h-[500px] object-cover rounded-sm object-center"
         />

src/components/Food.astro

@@ -1,12 +1,17 @@
+---
+import { Image } from 'astro:assets';
+import facade from '../assets/images/facade.jpg';
+---
+
 <section id="food" class="py-32 bg-secondary/20 scroll-mt-20">
   <div class="max-w-6xl mx-auto px-6">
     <div class="grid md:grid-cols-2 gap-16 items-center">
 
       <!-- Image -->
       <div class="relative order-2 md:order-1">
-        <img
+        <Image
-          src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=800&q=80"
+          src={facade}
-          alt="Repas fait maison"
+          alt="Le Moulin des Rives"
           class="w-full h-[500px] object-cover rounded-sm"
         />
         <div class="absolute -top-5 -right-5 w-40 h-40 border border-primary/25 -z-10"></div>

src/components/Gallery.astro

@@ -1,3 +1,24 @@
+---
+import { Image } from 'astro:assets';
+import g1 from '../assets/images/gallery_1.jpg';
+import g2 from '../assets/images/gallery_2.jpg';
+import g3 from '../assets/images/gallery_3.jpg';
+import g4 from '../assets/images/gallery_4.jpg';
+import g5 from '../assets/images/gallery_5.jpg';
+import g6 from '../assets/images/gallery_6.jpg';
+import g7 from '../assets/images/gallery_7.jpg';
+
+const photos = [
+  { src: g1, alt: 'Le gîte' },
+  { src: g2, alt: 'Chambre' },
+  { src: g3, alt: 'Cuisine' },
+  { src: g4, alt: 'Salon' },
+  { src: g5, alt: 'Extérieur' },
+  { src: g6, alt: 'Rivière' },
+  { src: g7, alt: 'Vue panoramique' },
+];
+---
+
 <section id="gallery" class="py-32 scroll-mt-20">
   <div class="max-w-6xl mx-auto px-6">
 
@@ -7,32 +28,16 @@
     </div>
 
     <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-      <img
+      {photos.map((photo, i) => (
-        src="/src/assets/images/gallery_1.jpg"
+        <div class:list={["overflow-hidden rounded-sm", i === 6 ? "col-span-2 md:col-span-1" : ""]}>
-        alt="Extérieur du gîte"
+          <Image
-        class="w-full h-64 object-cover rounded-sm"
+            src={photo.src}
-      />
+            alt={photo.alt}
-      <img
+            class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500"
-        src="/src/assets/images/gallery_2.jpg"
-        alt="Chambre"
-        class="w-full h-64 object-cover rounded-sm"
-      />
-      <img
-        src="/src/assets/images/gallery_3.jpg"
-        alt="Cuisine"
-        class="w-full h-64 object-cover rounded-sm"
-      />
-      <img
-        src="/src/assets/images/gallery_4.jpg"
-        alt="Rivière et forêt"
-        class="w-full h-64 object-cover rounded-sm"
-      />
-      <img
-        src="/src/assets/images/gallery_5.jpg"
-        alt="Vue panoramique"
-        class="w-full h-64 object-cover rounded-sm"
           />
         </div>
+      ))}
+    </div>
 
   </div>
 </section>

src/components/Hero.astro

@@ -1,14 +1,20 @@
+---
+import { Image } from 'astro:assets';
+import facade from '../assets/images/facade.jpg';
+---
+
 <section class="relative h-screen flex items-center justify-center overflow-hidden">
   <!-- Image de fond -->
   <div class="absolute inset-0">
-    <img
+    <Image
-      src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1920&q=80"
+      src={facade}
-      alt="Vallée de l'Allier"
+      alt="Le Moulin des Rives"
       class="w-full h-full object-cover"
+      loading="eager"
     />
     <div class="absolute inset-0 bg-dark/50"></div>
   </div>
-    docker inspect moulin-web-1 | grep -A5 "Networks"
+
   <!-- Contenu centré -->
   <div class="relative z-10 text-center text-white px-6 max-w-4xl mx-auto">
     <span class="block text-xs tracking-[0.4em] uppercase text-white/60 mb-6">