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.
|