FIX: customer logos

Fixed HiDPI customer logos

components/Customers.vue

@@ -4,7 +4,18 @@
     <h3>Meine bisherigen Geschäftpartner</h3>
     <div class="customer-list margin-top default-gap">
       <a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">
-        <img loading="lazy" height="50" :width="customer.logo.width" :alt="customer.name" :src="customer.logo.src" :class="[customer.logo.white ? 'white' : '']" />
+        <img
+            loading="lazy"
+            height="50"
+            :width="customer.logo.width"
+            :alt="customer.name"
+            :srcset="[
+                getCustomerImage(customer.logo.src)('1x', true),
+                getCustomerImage(customer.logo.src)('2x', true),
+                getCustomerImage(customer.logo.src)('3x', true),
+            ].join(', ')"
+            :src="getCustomerImage(customer.logo.src)('1x', false)"
+        />
       </a>
     </div>
     <h3 class="margin-top-big">Projektauswahl</h3>
@@ -34,21 +45,22 @@
 <script setup lang="ts">
 import { css, pcss, html, js, njs, nuxt, scss, ts, tw, vue, flutter, dart, android } from '~/Skills'
 
+const getCustomerImage = (img : string) => getImage('/img/customers/', img)
+
 const customers = [
   {
     name: 'Bounce Commerce',
     link: 'https://bounce-commerce.de',
     logo: {
-      src: '/img/customers/bounce.webp',
+      src: 'bounce',
       width: 150,
-      white: true,
     },
   },
   {
     name: 'GMX',
     link: 'https://gmx.net',
     logo: {
-      src: '/img/customers/gmx.webp',
+      src: 'gmx',
       width: 148,
       white: true,
     },
@@ -57,7 +69,7 @@ const customers = [
     name: 'WEB.DE',
     link: 'https://web.de',
     logo: {
-      src: '/img/customers/webde.webp',
+      src: 'webde',
       width: 50,
     },
   },
@@ -65,7 +77,7 @@ const customers = [
     name: '1&1',
     link: 'https://1und1.de',
     logo: {
-      src: '/img/customers/einsundeins.webp',
+      src: '1u1',
       width: 50,
     },
   },
@@ -73,7 +85,7 @@ const customers = [
     name: 'Körrie',
     link: 'https://körrie.de',
     logo: {
-      src: '/img/customers/koerrie.webp',
+      src: 'koerrie',
       width: 50,
     }
   },
@@ -81,7 +93,7 @@ const customers = [
     name: 'Pembe',
     link: 'https://pembe.io',
     logo: {
-      src: '/img/customers/pembe.webp',
+      src: 'pembe',
       width: 48,
       white: true,
     },
@@ -90,7 +102,7 @@ const customers = [
     name: 'SAE Institute Germany',
     link: 'https://www.sae.edu/deu/en/sae-home/',
     logo: {
-      src: '/img/customers/sae.webp',
+      src: 'sae',
       width: 77,
       white: true,
     },