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
This commit is contained in:
Claw (AI)
206
index.php
206
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>
|
||||
|
||||
Reference in New Issue
Block a user