⚡ add webp image to partner page

src/pages/partner.astro

@@ -6,22 +6,47 @@ import BaseLayout from "../layouts/BaseLayout.astro"
   title="Partner"
   description="Die Handelspartner von Fluffy Limonade"
 >
-
-    <section class="w-full text-center">
-      <h1 class="text-left font-branch textl-2xl lg:text-3xl xl:text-5xl">
-        Handelspartner
-      </h1>
-      <br/>
-        <figure class="flex flex-col items-center w-full p-2 my-2 border-2 rounded-md border-lemon-500 xl:p-4">
+  <section class="w-full text-center">
+    <h1 class="text-left font-branch textl-2xl lg:text-3xl xl:text-5xl">
+      Handelspartner
+    </h1>
+    <br />
+    <figure
+      class="
+        flex flex-col
+        items-center
+        w-full
+        p-2
+        my-2
+        border-2
+        rounded-md
+        border-lemon-500
+        xl:p-4
+      "
+    >
+      <picture class="w-24 h-24 p-2 xl:w-36 xl:h-36">
+        <source type="image/webp" srcset="/images/partner/construction.webp" />
+        <source type="image/png" srcset="/images/partner/construction.png" />
         <img
           loading="lazy"
           src="/images/partner/construction.png"
           alt="Construction Icon"
-          class="w-24 h-24 p-2 xl:w-36 xl:h-36"
           width="720"
           height="720"
         />
-        <figcaption class="text-justify text-lemon-500 md:text-lg lg:text-xl xl:text-2xl font-kyivsans">Dieser Abschnitt befindet sich noch in Arbeit.<br /> Schau gerne noch einmal später vorbei 😉</figcaption>
-      </figure>
-    </section>
+      </picture>
+      <figcaption
+        class="
+          text-justify text-lemon-500
+          md:text-lg
+          lg:text-xl
+          xl:text-2xl
+          font-kyivsans
+        "
+      >
+        Dieser Abschnitt befindet sich noch in Arbeit.<br />
+        Schau gerne noch einmal später vorbei 😉
+      </figcaption>
+    </figure>
+  </section>
 </BaseLayout>