⚡ add webp images to shopping items

src/components/shop/ShoppingItems.svelte

@@ -4,32 +4,32 @@
       url: "/shop/getraenkedosen",
       name: "Getränkedosen",
       description:
-        " Beliebt vor allem bei der Jugend ent­hält jede Dose 100% Fluffy-Flavoury. Garantiert! Er­hältlich in den Geschmacks­richtungen “Zitrone“ und “Orange“. ",
-      image: "/images/shop/limo1.png",
+        "Beliebt vor allem bei der Jugend ent­hält jede Dose 100% Fluffy-Flavoury. Garantiert! Er­hältlich in den Geschmacks­richtungen “Zitrone“ und “Orange“. ",
+      image: "/images/shop/limo1",
       price: "1,99",
     },
     {
       url: "/shop/bitter-lemon",
       name: "Bitter Lemon",
       description:
-        "Die Königin un­serer Produkt­palette. Ungemein lecker und er­frischend! Ideal für den nächsten Drink!",
-      image: "/images/shop/bitter_lemon-preview.png",
+        "Die Königin un­serer Produkt­palette. Un­gemein lecker und er­frischend! Ideal für den nächsten Drink!",
+      image: "/images/shop/bitter_lemon-preview",
       price: "2,49",
     },
     {
       url: "/shop/familienglueck",
       name: "Familienglück",
       description:
         "Die leck­ere Limo­nade für die ganze Familie. Er­hältlich in den Geschmacks­richtungen “Orange“ und “Himbeer“. ",
-      image: "/images/shop/limo_familienpack.png",
+      image: "/images/shop/limo_familienpack",
       price: "6,99",
     },
     {
       url: "/shop/mehrwegkiste",
       name: "Mehrwegkiste",
       description:
         "Fluffy gibt es natürlich auch in der kosten­günstigen Mehrweg­kiste. Diese schont die Um­welt und den Geld­beutel. ",
-      image: "/images/shop/limo_kiste.png",
+      image: "/images/shop/limo_kiste",
       price: "10,99",
     },
   ];
@@ -42,25 +42,31 @@
     <div
       class="relative w-5/6 p-4 overflow-hidden transition duration-500 shadow-lg hover:translate-y-1 hover:shadow-xl sm:w-2/3 md:w-64 bg-blue-50 dark:bg-bluegray-800 rounded-2xl"
     >
-      <img
-        alt={item.name}
-        src={item.image}
-        class="absolute w-40 h-auto mb-4 -right-20 -bottom-8"
-      />
+      <picture class="absolute w-40 h-auto mb-4 -right-20 -bottom-8">
+        <source type="image/webp" srcset={item.image + ".webp"} />
+        <source type="image/png" srcset={item.image + ".png"} />
+        <img alt={item.name} src={item.image + ".png"} />
+      </picture>
       <div class="w-4/6">
         <h3 class="no-underline hover:underline">
           <a
             class="mb-2 text-lg font-medium lg:text-xl font-kyivsans text-bluegray-800 dark:text-bluegray-100"
             href={item.url}>{item.name}</a
           >
         </h3>
-        <p>
+        <p class="mb-2">
           <a
             class="text-xs font-kyivsans lg:text-base text-bluegray-400 dark:text-bluegray-300 line-clamp-4"
             href={item.url}
           >
             {@html item.description}
           </a>
+          <a
+            class="text-xs underline font-kyivsans lg:text-base text-bluegray-400 dark:text-bluegray-300"
+            href={item.url}
+          >
+            Mehr lesen
+          </a>
         </p>
         <p class="text-xl font-medium text-lemon-500 font-kyivsans">
           € {item.price}