Fix #17: Bildoptimierung – WebP, Lazy Loading, Caching #22

2026-05-14T01:09:57+02:00

greggy commented

2026-05-14 01:09:57 +02:00

Zusammenfassung

Optimiert die Bildladung der Landingpage für deutlich bessere Performance.

Änderungen

WebP-Konvertierung: Alle 34 Bilder → WebP (Qualität 80)
Größenreduktion: 21,6 MB → 2,8 MB (87% Einsparung)
<picture> Tags: Jedes Bild mit WebP-Source + Original-Fallback
Lazy Loading: loading="lazy" auf allen below-the-fold Bildern
nginx: Gzip aktiviert + 30-Tage Cache-Headers für statische Assets
Masonry.js entfernt: 24 KB, wurde nie referenziert
Defekte Referenzen: bad3.jpg → Bad-3.webp, WhatsApp Image → Bad-4.webp
Lightbox: WebP-Support mit Error-Fallback auf Original

Akzeptanzkriterien

Alle Bilder als WebP (mit Fallback)
<picture> auf allen <img> Tags
Lazy Loading auf below-the-fold
Masonry.js gelöscht
nginx Cache-Header + Gzip
Defekte Referenzen repariert
87% Größenreduktion (>60% Ziel)

Resolves #17

## Zusammenfassung Optimiert die Bildladung der Landingpage für deutlich bessere Performance. ### Änderungen - **WebP-Konvertierung:** Alle 34 Bilder → WebP (Qualität 80) - **Größenreduktion:** 21,6 MB → 2,8 MB (**87% Einsparung**) - **`<picture>` Tags:** Jedes Bild mit WebP-Source + Original-Fallback - **Lazy Loading:** `loading="lazy"` auf allen below-the-fold Bildern - **nginx:** Gzip aktiviert + 30-Tage Cache-Headers für statische Assets - **Masonry.js entfernt:** 24 KB, wurde nie referenziert - **Defekte Referenzen:** `bad3.jpg` → `Bad-3.webp`, WhatsApp Image → `Bad-4.webp` - **Lightbox:** WebP-Support mit Error-Fallback auf Original ### Akzeptanzkriterien - [x] Alle Bilder als WebP (mit Fallback) - [x] `<picture>` auf allen `<img>` Tags - [x] Lazy Loading auf below-the-fold - [x] Masonry.js gelöscht - [x] nginx Cache-Header + Gzip - [x] Defekte Referenzen repariert - [x] 87% Größenreduktion (>60% Ziel) Resolves #17

greggy added 4 commits 2026-05-14 01:09:57 +02:00

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

- 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

fix(images): update nginx with gzip and 30d cache headers dd6b816cab

- Enable gzip for CSS, JS, SVG, JSON, XML
- Add 30-day cache headers for static assets (images, CSS, JS, fonts)
- Set Cache-Control: public, immutable for static files

fix(images): remove unused masonry.js and fix broken references f84f4ed42d

- Delete js/masonry.pkgd.min.js (24 KB, never referenced in HTML)
- Fix bad3.jpg → Bad-3.webp reference (was 404)
- Fix WhatsApp Image reference → replaced with Bad-4.webp (existing image)
- Update data-img attributes to use WebP paths

fix(js): improve lightbox WebP fallback error handler b6a4d9b23a

- Use .off('error') to prevent stacking error handlers
- Simplify fallback logic: only replace .webp → .png on error
- Prevents infinite error loops

greggy added 2 commits 2026-05-15 09:57:42 +02:00

fix(js): improve lightbox WebP fallback error handler b6a4d9b23a

- Use .off('error') to prevent stacking error handlers
- Simplify fallback logic: only replace .webp → .png on error
- Prevents infinite error loops

fix(js): improve lightbox WebP fallback error handler

Deploy Feature Branch to Test / deploy (push) Successful in 24s

Details

73635a5f03

- Use .off('error') to prevent stacking error handlers
- Simplify fallback logic: only replace .webp → .png on error
- Prevents infinite error loops

greggy added 1 commit 2026-05-19 15:28:55 +02:00

merge: resolve conflicts with main (WebP + vanilla JS + a11y)

Deploy Feature Branch to Test / deploy (push) Successful in 32s

Details

9c0a9a856a

greggy merged commit 6612a0207a into main

2026-05-19 15:29:05 +02:00

greggy referenced this issue from a commit

2026-05-19 15:29:06 +02:00

Merge pull request 'Fix #17: Bildoptimierung – WebP, Lazy Loading, Caching' (#22) from feature/issue-17-bildoptimierung-webp into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: greggy/landingpage-haus-schleusingen#22