feat(images): convert all images to WebP with 87% size reduction

- Convert 34 images (PNG/JPG) to WebP at quality 80
- Total savings: 21.6 MB → 2.8 MB (87% reduction)
- Add <picture> elements with WebP source + original fallback
- Add loading=lazy to all below-the-fold images
- Update lightbox to serve WebP images with error fallback

index.php

@@ -210,7 +210,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
       <div
         class="hero-bg"
         id="heroBg"
-        style="background-image: url(bilder/Außenansicht-2.png)"
+        style="background-image: url(bilder/Außenansicht-2.webp)"
       ></div>
       <div class="hero-overlay"></div>
       <div class="hero-content" id="heroContent">
@@ -283,7 +283,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         </div>
       </div>
       <div class="intro-img" data-animate>
-        <img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" />
+        <picture>
+          <source srcset="bilder/wohnzimmer2.webp" type="image/webp">
+          <img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" loading="lazy" />
+        </picture>
         <div class="intro-img-badge">Wohnzimmer · 42,6 m²</div>
       </div>
     </section>
@@ -298,55 +301,88 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
       <div class="masonry-grid">
         <div class="grid-sizer"></div>
 
-        <div class="grid-item" data-img="bilder/Außenansicht-2.png">
-          <img src="bilder/Außenansicht-2-small.png" alt="Außenansicht" />
+        <div class="grid-item" data-img="bilder/Außenansicht-2.webp">
+          <picture>
+            <source srcset="bilder/Außenansicht-2-small.webp" type="image/webp">
+            <img src="bilder/Außenansicht-2-small.png" alt="Außenansicht" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Außenansicht</span>
         </div>
-        <div class="grid-item" data-img="bilder/wohnzimmer2.png">
-          <img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" />
+        <div class="grid-item" data-img="bilder/wohnzimmer2.webp">
+          <picture>
+            <source srcset="bilder/wohnzimmer2-small.webp" type="image/webp">
+            <img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Wohnzimmer · 42,6 m²</span>
         </div>
-        <div class="grid-item" data-img="bilder/Küche 1.jpg">
-          <img src="bilder/Küche 1.jpg" alt="Küche" />
+        <div class="grid-item" data-img="bilder/Küche 1.webp">
+          <picture>
+            <source srcset="bilder/Küche 1-small.webp" type="image/webp">
+            <img src="bilder/Küche 1.jpg" alt="Küche" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Küche · 18,4 m²</span>
         </div>
-        <div class="grid-item" data-img="bilder/schlafzimmer.png">
-          <img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer" />
+        <div class="grid-item" data-img="bilder/schlafzimmer.webp">
+          <picture>
+            <source srcset="bilder/schlafzimmer-small.webp" type="image/webp">
+            <img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Schlafzimmer · 18 m²</span>
         </div>
-        <div class="grid-item" data-img="bilder/Bad.jpg">
-          <img src="bilder/Bad.jpg" alt="Badezimmer" />
+        <div class="grid-item" data-img="bilder/Bad.webp">
+          <picture>
+            <source srcset="bilder/Bad-small.webp" type="image/webp">
+            <img src="bilder/Bad.jpg" alt="Badezimmer" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Badezimmer · 9,8 m²</span>
         </div>
-        <div class="grid-item" data-img="bilder/Kinderzimmer.png">
-          <img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1" />
+        <div class="grid-item" data-img="bilder/Kinderzimmer.webp">
+          <picture>
+            <source srcset="bilder/Kinderzimmer-small.webp" type="image/webp">
+            <img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Kinderzimmer 1 · 21,7 m²</span>
         </div>
-        <div class="grid-item" data-img="bilder/Kinderzimmer 2.jpg">
-          <img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2" />
+        <div class="grid-item" data-img="bilder/Kinderzimmer 2.webp">
+          <picture>
+            <source srcset="bilder/Kinderzimmer 2-small.webp" type="image/webp">
+            <img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Kinderzimmer 2 · 15,7 m²</span>
         </div>
-        <div class="grid-item" data-img="bilder/kinderzimmer 2 2.jpeg">
-          <img src="bilder/kinderzimmer 2 2-small.png" alt="Kinderzimmer Detail" />
+        <div class="grid-item" data-img="bilder/kinderzimmer 2 2.webp">
+          <picture>
+            <source srcset="bilder/kinderzimmer 2 2-small.webp" type="image/webp">
+            <img src="bilder/kinderzimmer 2 2-small.png" alt="Kinderzimmer Detail" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Kinderzimmer Detail</span>
         </div>
-        <div class="grid-item" data-img="bilder/Kinderzimmer 3.jpg">
-          <img src="bilder/Kinderzimmer 3-small.png" alt="Kinderzimmer 3" />
+        <div class="grid-item" data-img="bilder/Kinderzimmer 3.webp">
+          <picture>
+            <source srcset="bilder/Kinderzimmer 3-small.webp" type="image/webp">
+            <img src="bilder/Kinderzimmer 3-small.png" alt="Kinderzimmer 3" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Gästezimmer · 11,5 m²</span>
         </div>
-        <div class="grid-item" data-img="bilder/Bad-2.jpg">
-          <img src="bilder/Bad-2-small.jpg" alt="Wohnbereich Detail 1" />
+        <div class="grid-item" data-img="bilder/Bad-2.webp">
+          <picture>
+            <source srcset="bilder/Bad-2-small.webp" type="image/webp">
+            <img src="bilder/Bad-2-small.jpg" alt="Wohnbereich Detail 1" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Wohnbereich</span>
         </div>
-        <div class="grid-item" data-img="bilder/bad3.jpg">
-          <img src="bilder/Bad-3-small.jpg" alt="Wohnbereich Detail 2" />
+        <div class="grid-item" data-img="bilder/Bad-3.webp">
+          <picture>
+            <source srcset="bilder/Bad-3-small.webp" type="image/webp">
+            <img src="bilder/Bad-3-small.jpg" alt="Wohnbereich Detail 2" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Wohnbereich Detail</span>
         </div>
-        <div class="grid-item" data-img="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg">
-          <img
-            src="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg"
-            alt="Wohnbereich Detail 3"
-          />
+        <div class="grid-item" data-img="bilder/Bad-4.webp">
+          <picture>
+            <source srcset="bilder/Bad-4-small.webp" type="image/webp">
+            <img src="bilder/Bad-4-small.jpg" alt="Wohnbereich Detail 3" loading="lazy" />
+          </picture>
           <span class="grid-item-label">Hausansicht</span>
         </div>
       </div>
@@ -392,16 +428,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
-              <img
-                src="bilder/grundrisse/EG-small.jpg"
-                alt="Grundriss Erdgeschoss"
-                data-img="bilder/grundrisse/EG.png"
-              />
-              <img
-                src="bilder/grundrisse/EG 3D-small.jpg"
-                alt="Grundriss Erdgeschoss"
-                data-img="bilder/grundrisse/EG 3D.png"
-              />
+              <picture>
+                <source srcset="bilder/grundrisse/EG-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/EG-small.jpg"
+                  alt="Grundriss Erdgeschoss"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/EG.webp"
+                />
+              </picture>
+              <picture>
+                <source srcset="bilder/grundrisse/EG 3D-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/EG 3D-small.jpg"
+                  alt="Grundriss Erdgeschoss"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/EG 3D.webp"
+                />
+              </picture>
             </div>
           </div>
         </div>
@@ -441,16 +485,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
-              <img
-                src="bilder/grundrisse/OG 1 2-small.jpg"
-                alt="Grundriss 1. Obergeschoss"
-                data-img="bilder/grundrisse/OG 1 2.png"
-              />
-              <img
-                src="bilder/grundrisse/OG 1 3D-small.jpg"
-                alt="Grundriss 1. Obergeschoss"
-                data-img="bilder/grundrisse/OG 1 3D.png"
-              />
+              <picture>
+                <source srcset="bilder/grundrisse/OG 1 2-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/OG 1 2-small.jpg"
+                  alt="Grundriss 1. Obergeschoss"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 1 2.webp"
+                />
+              </picture>
+              <picture>
+                <source srcset="bilder/grundrisse/OG 1 3D-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/OG 1 3D-small.jpg"
+                  alt="Grundriss 1. Obergeschoss"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 1 3D.webp"
+                />
+              </picture>
             </div>
           </div>
         </div>
@@ -490,16 +542,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
-              <img
-                src="bilder/grundrisse/OG 2 grundriss-small.jpg"
-                alt="Grundriss 2. Obergeschoss (1)"
-                data-img="bilder/grundrisse/OG 2 grundriss.png"
-              />
-              <img
-                src="bilder/grundrisse/OG 2 3D-small.jpg"
-                alt="Grundriss 2. Obergeschoss (1)"
-                data-img="bilder/grundrisse/OG 2 3D.png"
-              />
+              <picture>
+                <source srcset="bilder/grundrisse/OG 2 grundriss-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/OG 2 grundriss-small.jpg"
+                  alt="Grundriss 2. Obergeschoss (1)"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 2 grundriss.webp"
+                />
+              </picture>
+              <picture>
+                <source srcset="bilder/grundrisse/OG 2 3D-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/OG 2 3D-small.jpg"
+                  alt="Grundriss 2. Obergeschoss (1)"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 2 3D.webp"
+                />
+              </picture>
             </div>
           </div>
         </div>
@@ -527,16 +587,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
-              <img
-                src="bilder/grundrisse/Dachboden unten 2-small.jpg"
-                alt="Grundriss Dachboden"
-                data-img="bilder/grundrisse/Dachboden unten 2.png"
-              />
-              <img
-                src="bilder/grundrisse/Dachboden unten-small.jpg"
-                alt="Grundriss Dachboden"
-                data-img="bilder/grundrisse/Dachboden unten.png"
-              />
+              <picture>
+                <source srcset="bilder/grundrisse/Dachboden unten 2-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/Dachboden unten 2-small.jpg"
+                  alt="Grundriss Dachboden"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/Dachboden unten 2.webp"
+                />
+              </picture>
+              <picture>
+                <source srcset="bilder/grundrisse/Dachboden unten-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/Dachboden unten-small.jpg"
+                  alt="Grundriss Dachboden"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/Dachboden unten.webp"
+                />
+              </picture>
             </div>
           </div>
         </div>

js/haus-schleusingen.js

@@ -46,6 +46,11 @@ $(function () {
   // Lightbox – gallery grid items
   $(document).on("click", ".grid-item", function () {
     var src = $(this).data("img") || $(this).find("img").attr("src");
+    $("#lightboxImg").on("error", function () {
+      // WebP fallback: try original format
+      var fallback = src.replace(/\.webp$/, src.endsWith('.webp') ? '.png' : '.jpg');
+      if ($(this).attr('src') !== fallback) $(this).attr('src', fallback);
+    });
     $("#lightboxImg").attr("src", src);
     $("#lightbox").addClass("open");
     $("body").css("overflow", "hidden");
@@ -54,6 +59,10 @@ $(function () {
   // Lightbox – floor plan images in Raumaufteilung
   $(document).on("click", ".floor-plan img[data-img]", function () {
     var src = $(this).data("img");
+    $("#lightboxImg").on("error", function () {
+      var fallback = src.replace(/\.webp$/, '.png');
+      if ($(this).attr('src') !== fallback) $(this).attr('src', fallback);
+    });
     $("#lightboxImg").attr("src", src);
     $("#lightbox").addClass("open");
     $("body").css("overflow", "hidden");

nginx.conf

@@ -5,7 +5,20 @@ server {
     root /usr/share/nginx/html;
     index haus-schleusingen.html;
 
+    # Gzip aktivieren
+    gzip on;
+    gzip_types text/css application/javascript image/svg+xml application/json text/xml;
+    gzip_min_length 256;
+    gzip_vary on;
+
     location / {
         try_files $uri $uri/ /haus-schleusingen.html;
     }
-}
+
+    # Lange Cache-Dauer für Bilder und statische Assets
+    location ~* \.(jpg|jpeg|png|webp|gif|ico|svg|css|js|woff2?)$ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+        access_log off;
+    }
+}