perf: optimize homepage and logo images to webp

privat/CV/andreknie.de/src/components/DotCloudIcon.jsx

@@ -6,7 +6,7 @@ import React, { useRef, useEffect } from 'react'
  * - Samples dark pixels → places dots
  * - Dots are STATIC until mouse hovers, then they scatter and spring back
  * 
- * For germany: uses /images/germany-outline.png
+ * For germany: uses /images/germany-outline.webp
  * For shield/tools: draws shape on offscreen canvas then samples
  */
 export default function DotCloudIcon({ shape = 'germany', size = 140 }) {
@@ -181,7 +181,7 @@ function sampleGermany(size) {
       resolve(points)
     }
     img.onerror = () => { console.error('[DotCloudIcon] Failed to load germany image'); resolve([]) }
-    img.src = '/images/germany-outline.png'
+    img.src = '/images/germany-outline.webp'
   })
 }
 
@@ -320,6 +320,6 @@ function sampleToolsRightHalf(size) {
       resolve(points)
     }
     img.onerror = () => resolve([])
-    img.src = '/images/tools.jpg'
+    img.src = '/images/tools.webp'
   })
 }

privat/CV/andreknie.de/src/components/PhotoBand.test.jsx

@@ -16,7 +16,7 @@ describe('PhotoBand', () => {
   // The CSS animation translates the track by -50%. If the sequence is not
   // rendered exactly twice, the loop "jumps" instead of being seamless.
   it('renders the image sequence exactly twice for a seamless loop', () => {
-    const images = ['/a.jpg', '/b.jpg', '/c.jpg']
+    const images = ['/a.webp', '/b.webp', '/c.webp']
     const { container } = render(<PhotoBand images={images} />)
     const rendered = [...container.querySelectorAll('.photo-band-track img')].map(img =>
       img.getAttribute('src')
@@ -30,7 +30,7 @@ describe('PhotoBand', () => {
 
   it('keeps the duplication invariant for any non-empty image list', () => {
     for (const n of [1, 2, 4, 7]) {
-      const images = Array.from({ length: n }, (_, i) => `/img-${i}.jpg`)
+      const images = Array.from({ length: n }, (_, i) => `/img-${i}.webp`)
       const { container } = render(<PhotoBand images={images} />)
       const count = container.querySelectorAll('.photo-band-track img').length
       expect(count).toBe(n * 2)

privat/CV/andreknie.de/src/components/SEOHead.jsx

@@ -8,7 +8,7 @@ export default function SEOHead({ title, description, url, image, type = 'websit
   const siteTitle = title ? `${title} | Dr. André Knie` : defaultTitle
   const siteDesc = description || defaultDescription
   const siteUrl = url ? `https://andreknie.de${url}` : "https://andreknie.de"
-  const siteImage = image || "https://andreknie.de/images/og-image.jpg"
+  const siteImage = image || "https://andreknie.de/images/og-image.webp"
 
   return (
     <Helmet>