v4.0.0.2

2026-05-26 08:30:05 +12:00
parent 171b193498
commit 005aab8139
14 changed files with 3719 additions and 0 deletions
@@ -0,0 +1,56 @@
+# WebP Conversion (C5) — One-time setup
+
+The hero `<picture>` element in `src/lib/components/HeroSection.svelte` now
+supports WebP sources. Once you generate the WebP files, add the URL fields
+to the hero content block — the markup will start serving WebP automatically
+to supporting browsers (every browser currently in use).
+
+## 1. Generate WebP variants
+
+From the project root, with `cwebp` installed (`brew install webp` /
+`choco install webp` / `apt install webp`):
+
+```bash
+# Mobile hero (already 1536x1024 — optimise + convert)
+cwebp -q 82 static/images/maya-mascot.png -o static/images/maya-mascot.webp
+
+# Three new untracked images visible in git status
+cwebp -q 82 static/images/happy-dogs-in-travel-ready-suv.jpg -o static/images/happy-dogs-in-travel-ready-suv.webp
+cwebp -q 82 static/images/playful-dog-pack-in-park.jpg -o static/images/playful-dog-pack-in-park.webp
+cwebp -q 82 static/images/testimonial-freddy-eating-stick-in-park.png -o static/images/testimonial-freddy-eating-stick-in-park.webp
+```
+
+Target file sizes:
+- Hero (mobile): under 150 KB
+- Hero (desktop): under 300 KB
+- Testimonials/inline: under 80 KB
+
+## 2. Wire up the WebP source
+
+In `src/lib/content/homepage.ts`, uncomment and set:
+
+```ts
+hero: {
+  // ...existing fields
+  imageWidth: 1536,
+  imageHeight: 1024,
+  imageWebpUrl: '/images/maya-mascot.webp'
+}
+```
+
+If you also produce a desktop-specific variant, add `desktopImageUrl` and
+`desktopImageWebpUrl`.
+
+## 3. Verify
+
+Open the homepage in Chrome DevTools → Network → filter `Img`. You should
+see `maya-mascot.webp` being served with `Type: webp`. The `.png` is the
+fallback `<img>` and should only load if WebP is somehow unsupported.
+
+## Why this matters
+
+The codebase ships PNG/JPG hero assets. WebP at quality 82 typically lands
+30–50% smaller than the equivalent PNG/JPG with no perceptible quality
+difference. For the LCP element on a mobile homepage, that's a 0.5–1.5s
+improvement on slow 4G — directly relevant to the `largest-contentful-paint`
+Core Web Vital.