utilisation de la balise picture pour optimiser les images

src/assets/styles/style.scss

@@ -24,22 +24,12 @@ footer{
     background: linear-gradient(90deg,rgba(0, 0, 0, 1) -50%, rgba(92, 92, 91, 0) 300%),
     url('/images/bg.svg') bottom/cover no-repeat;
 }
-@media (min-width: 1024px) {
-	.moi img{
-		border-top-left-radius: 1rem;
-		border-bottom-left-radius: 1rem;
-	}
-}
 @media (min-width: 320px) {
 	.slide-track {
 		overflow-y: auto;
 		display: flex;
 		height: 32rem;
 	}
-	.moiMob img{
-		border-top-left-radius: 1rem;
-		border-top-right-radius: 1rem;
-	}
 }
 details summary::-webkit-details-marker {
 	display: none;

src/components/global/Cards.astro

@@ -1,18 +1,20 @@
 ---
 const { title, description, price, imageSrc, lien, logo, typeMotor, typeMotor1, alt, altLogo } = Astro.props;
+import Picture from 'components/global/Picture.astro';
 import { Eye } from 'lucide-astro';
+import motor from '/public/images/motor.png';
 ---
 <a href={lien} rel="noopener noreferrer">
 <div class="bg-white flex flex-col justify-between items-center w-80 lg:w-96 p-6 rounded-3xl shadow-lg card slide relative transition-transform duration-300 transform hover:scale-110 group hover:z-20">
   <div class="flex justify-between items-center w-full h-20">
-    <p class="font-bold text-3xl w-3/4 ">{title}</p>
+    <p class="font-bold text-3xl w-3/4">{title}</p>
     <img class="w-1/4" src={logo} alt={altLogo}>
   </div>
   <div class="w-full flex justify-between mt-2 items-center">
     <p class="text-gray-400 z-20">{description}</p>
     {typeMotor && (
     <div class=" flex gap-1 items-center">
-      <img src="/images/motor.png" alt="moteur" class="w-12 h-12" loading="lazy">
+      <Picture src={motor} alt="moteur" class="w-12 h-12"></Picture>
 		<div class="flex flex-col lg:flex-row gap-1">
 			  <p class="px-3 bg-orange-500 rounded-3xl items-center flex justify-center text-white h-fit">{typeMotor}</p>
 			{typeMotor1 && (
@@ -23,7 +25,13 @@ import { Eye } from 'lucide-astro';
     )}
   </div>
   <div class="cards rounded-full w-52 h-52 flex items-center justify-center mt-6">
-	<img class="max-w-72 lg:max-w-80 cylindre transition-transform duration-300 group transform group-hover:scale-110" alt={alt} src={imageSrc} loading="lazy"/>
+    <Picture 
+		class="max-w-72 lg:max-w-80 cylindre transition-transform duration-300 group transform group-hover:scale-110"
+		alt={alt} src={imageSrc}  
+		width="0"
+		height="0">
+	</Picture>
+
   </div>
   <div class="flex justify-between items-center w-full mt-4">
     {price && (

src/components/global/CardsCate.astro

@@ -1,9 +1,15 @@
 ---
+import Picture from "astro/components/Picture.astro";
 const { title, imageSrc, lien, entreprise, alt } = Astro.props;
 ---
 <a href={lien} rel="noopener noreferrer">
-	<div class="flex flex-col justify-center items-center w-80 lg:w-96 shadow-lg card-prod lg:mt-16 rounded-3xl">
-        <img src={imageSrc} alt={alt} class="object-cover w-80 lg:w-96 z-0 card-prod rounded-3xl absolute" loading="lazy">
+	<div class="w-80 lg:w-96 shadow-lg card-prod lg:mt-16 rounded-3xl">
+        <Picture 
+            src={imageSrc} alt={alt}
+            class="object-cover w-80 lg:w-96 z-0 card-prod rounded-3xl absolute"
+            width="0"
+            height="0"
+        ></Picture>
         <div class="relative w-full flex justify-end flex-col z-10 rounded-3xl card-prod-text">
             <p class="font-bold text-3xl text-white ml-4">{title}</p>
             <p class="text-gray-300 ml-4 mb-8">{entreprise}</p>

src/components/global/TemplateConfig.astro

@@ -1,6 +1,8 @@
 ---
 const { title, enderTitle, typeMotor, typeMotor1, description, price, images, pieces, logo, alt } = Astro.props;
 import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-astro';
+import motor from '/public/images/motor.png';
+import Picture from 'components/global/Picture.astro';
 ---
 
 <div class="bg-white rounded-3xl w-9/12 flex justify-center py-6 flex-col mt-96 lg:mt-60 lg:mb-60 mb-28 items-center lg:flex-row">
@@ -18,7 +20,14 @@ import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-astro';
                     <div class="flex items-center justify-center w-8/12">
                         <div class="cards rounded-full flex items-center justify-center fond-cyl">
                             <div class="lg:w-screen">
-                                <img class="-ml-8 lg:-ml-16" src={imageSrc} alt={alt}/>
+                                <Picture
+                                    class="-ml-8 lg:-ml-16" 
+                                    src={imageSrc} alt={alt}
+                                    width="0"
+                                    height="0"
+                                    loading="lazy">
+                                </Picture>
+
                             </div>
                         </div>
                     </div>
@@ -40,7 +49,7 @@ import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-astro';
             )}
             <div class="flex gap-2 items-center">
                 {typeMotor && (
-                    <img src="/images/motor.png" alt="moteur" class="w-12 h-12">
+                    <Picture src={motor} alt="moteur" class="w-12 h-12"></Picture>
                     <div class="flex flex-col lg:flex-row gap-2 md:mr-8 lg:mr-0">
                         <p class="px-3 bg-orange-500 rounded-3xl items-center flex justify-center text-white">{typeMotor}</p>
                         {typeMotor1 && (

src/pages/categorie/allDays.astro

@@ -3,13 +3,15 @@ import MainLayout from 'layouts/MainLayout.astro';
 import { MoveUp } from 'lucide-astro';
 import ProductCard from 'components/global/Cards.astro';
 import { categories } from 'libs/configurations';
+import Picture from 'components/global/Picture.astro';
+import yoni from '/public/images/yoni.jpeg'
 ---
 
 <MainLayout title="Trouve ta pièce | ALLDAYS" class="overflow-x-hidden">
   <main class="pt-44">
     <div id="top" class="bg-white rounded-t-3xl w-11/12 flex justify-center mx-auto items-center flex-col mt-20 lg:mt-0">
       <div class="flex items-center gap-4 p-8 flex-col lg:flex-row">
-        <img src="/images/yoni.jpeg" class="w-full lg:w-2/5" alt="yoniproject_">
+		<Picture src={yoni} class="w-full lg:w-11/12" alt="yoniproject_"></Picture>
         <p><strong>Optimisez votre conduite quotidienne avec nos configurations moteur alldays</strong><br>
           Découvrez nos configurations moteur conçues pour améliorer les performances de votre véhicule, sans sacrifier la fiabilité. Nous offrons une gamme de prix pour répondre à divers budgets. Transformez votre conduite quotidienne dès aujourd'hui.
         </p>
@@ -25,7 +27,7 @@ import { categories } from 'libs/configurations';
 			data-category={category.id} 
 			rel="noopener noreferrer"
 		  >
-			<img src={category.source} /> {category.label}
+			<Picture src={category.source} width="0" height="0"></Picture>{category.label}
 		  </a>
 		))}
 	</div>

src/pages/index.astro

@@ -64,9 +64,9 @@ import Picture from 'components/global/Picture.astro';
       </div>
     </div>
     <div class="w-full flex justify-center py-8 mt-16 lg:mt-0">
-      <div class="w-11/12 lg:w-4/5 rounded-2xl bg flex gap-2 items-center pb-4 justify-center lg:py-0 lg:pr-20 flex-col lg:flex-row">
-        <Picture class="moi hidden lg:block w-2/5" src={moi} alt="Moto"></Picture>
-        <Picture class="moiMob block lg:hidden" src={moiMob} alt="Moto"></Picture>
+      <div class="w-11/12 lg:w-4/5 rounded-2xl bg flex items-center pb-4 justify-center lg:py-0 lg:pr-20 flex-col lg:flex-row">
+        <Picture class="rounded-l-2xl hidden lg:block w-4/5" src={moi} alt="Moto"></Picture>
+        <Picture class="rounded-t-2xl block lg:hidden" src={moiMob} alt="Moto"></Picture>
         <p class="w-3/5 text-white gap-3 mx-4 hidden md:flex text-pres italic">
           <Quote class="w-96"/>Moi c’est Lucas, motard de 22 ans, passionné de moto depuis tout petit. Cette passion s'est rapidement étendue à la mécanique. J'ai commencé par construire mes propres moteurs de 50cc, participant à des rassemblements informels qui se sont rapidement transformés en compétitions. J'ai eu l'opportunité de courir pour l'équipe WRP Racing dans plusieurs compétitions, notamment à Salbris et Bordeaux, où j'ai toujours obtenu d'excellents résultats. Au fil des ans, j'ai construit et préparé un grand nombre de moteurs, que ce soit pour moi-même ou pour des clients. J'ai réalisé de nombreuses préparations de configurations, certaines plus extravagantes que d'autres. Grâce à cela, j'ai acquis une solide connaissance et expérience dans le domaine.
           C'est cette expertise que j'ai décidé de partager en créant ce site. Mon objectif est d'aider les novices à comprendre plus facilement le monde de la moto, mais aussi de référencer des pièces parfois rares.