57 lines
2.0 KiB
Markdown
57 lines
2.0 KiB
Markdown
# 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.
|