ADD: optimize images

components/Customers/Customers.vue

@@ -39,25 +39,25 @@ import { ase, cs, css, html, js, ng, njs, nuxt, phaser, scss, ts, tw, unity, vue
 const customers = [
   {
     name: 'Dekra',
-    logo: '/img/customers/dekra.png',
+    logo: '/img/customers/dekra.webp',
     link: 'https://dekra.de'
   }, {
     name: 'Bounce Commerce',
-    logo: '/img/customers/bounce.png',
+    logo: '/img/customers/bounce.webp',
     link: 'https://bounce-commerce.de',
     white: true,
   }, {
     name: 'GMX',
-    logo: '/img/customers/gmx.png',
+    logo: '/img/customers/gmx.webp',
     link: 'https://gmx.net',
     white: true,
   }, {
     name: 'WEB.DE',
-    logo: '/img/customers/webde.png',
+    logo: '/img/customers/webde.webp',
     link: 'https://web.de',
   }, {
     name: '1&1',
-    logo: '/img/customers/einsundeins.png',
+    logo: '/img/customers/einsundeins.webp',
     link: 'https://1und1.de',
   }, {
     name: 'Körrie',
@@ -65,12 +65,12 @@ const customers = [
     link: 'https://körrie.de',
   }, {
     name: 'Pembe',
-    logo: '/img/customers/pembe.svg',
+    logo: '/img/customers/pembe.webp',
     link: 'https://pembe.io',
     white: true,
   }, {
     name: 'SAE Institute Germany',
-    logo: '/img/customers/sae.png',
+    logo: '/img/customers/sae.webp',
     link: 'https://www.sae.edu/deu/en/sae-home/',
     white: true,
   }
@@ -80,7 +80,7 @@ const projects = [
   {
     title: 'Unterricht',
     customer: 'SAE Institute Germany',
-    image: '/img/projects/education.jpg',
+    image: '/img/projects/education.webp',
     desc: [
       'Vorbereitung und Durchführung von Unterricht in JavaScript und TypeScript.',
     ],
@@ -89,7 +89,7 @@ const projects = [
     title: 'Headless CMS & Cache',
     customer: 'Dekra',
     link: 'https://dekra.de',
-    image: '/img/projects/dekra.png',
+    image: '/img/projects/dekra.webp',
     desc: [
       'Anbindung an ein Headless CMS und Entwicklung der dazugehörigen Komponentenbibliothek, sowie Serverseitiges Caching.',
     ],
@@ -99,7 +99,7 @@ const projects = [
     title: 'Bounce Script',
     customer: 'Bounce Commerce',
     link: 'https://bounce-commerce.de',
-    image: '/img/projects/bounce.jpg',
+    image: '/img/projects/bounce.webp',
     desc: [
       'Script zum Einbinden in Web Shops für Bounce Management.',
       'Pures JavaScript, so klein gehalten wie möglich zur einfach Integration.',
@@ -131,7 +131,7 @@ const projects = [
     title: 'UI Tools',
     customer: 'webfussel',
     link: 'https://uitools.webfussel.de',
-    image: '/img/projects/uitools.png',
+    image: '/img/projects/uitools.webp',
     desc: [
       'Eine kleine Sammlung an Tools für die Erstellung von UIs:',
       'Farbpalette, Kontraste und CSS Variablen.',

components/Intro/Intro.css

@@ -29,6 +29,14 @@
     }
 }
 
+@media (width <= 430px) {
+    .Intro {
+        .intro-img{
+            width: 430px;
+        }
+    }
+}
+
 @media (width < 900px) {
     .Intro {
         grid-template-columns: 1fr;

components/Intro/Intro.vue

@@ -24,7 +24,10 @@
       <Button href="#services" class="cta" label="Lass mal reden" />
     </div>
     <div class="intro-img">
-      <img src="/profile.webp" alt="Bild von mir" />
+      <picture>
+        <source media="(min-width: 431px)" srcset="/img/profile_big.webp" />
+        <img src="/img/profile_small.webp" alt="Bild von mir" />
+      </picture>
     </div>
   </section>
 </template>

components/Services/Services.vue

@@ -94,25 +94,25 @@ const shuffle = <T>(unshuffled : T[]) => unshuffled
 const network = shuffle([
   {
     name: 'Robert Janus',
-    img: '/img/network/robert.jpg',
+    img: '/img/network/robert.webp',
     tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
     flavour: 'Website, SEO und Conversions. Auf einen Klick.',
     link: 'https://robertjanus.de/webertoire',
   }, {
     name: 'Matthias Lehmann',
-    img: '/img/network/matthias.jpg',
+    img: '/img/network/matthias.webp',
     tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
     flavour: 'Software die macht, was DU willst!',
     link: 'https://mind-deploy.de',
   }, {
     name: 'Maximilian Schluer',
-    img: '/img/network/maximilian.jpg',
+    img: '/img/network/maximilian.webp',
     tags: ['iOS Development', 'Software-QA'],
     flavour: 'Kann dein iOS-Team unterstützen oder dein Software-Qualitätsproblem lösen – egal welches.',
     link: 'https://max-shluer.de',
   }, {
     name: 'Maria Salcedo',
-    img: '/img/network/maria.jpg',
+    img: '/img/network/maria.webp',
     tags: ['Backend', 'DevOps', 'Architektur'],
     flavour: 'Effizient und kommunikativ. "You build it, you run it."',
     link: 'https://masagu.dev',