# Kooshy homepage media, re-encoded

From BestDosage, free. The homepage currently sends 16.8 MB of animated images (the stop-motion loops). Shopify serves them as animated WebP inside an `<img>`, so every visitor downloads every frame before the page settles. The same loops as short muted videos are 3.3 MB (MP4) or 3.2 MB (WebM), with no visible change.

## What is in this folder

| Original on the site | Frames | Size on site | MP4 | WebM | Poster |
|---|---|---|---|---|---|
| Stop_Motion_3 (600 px) | 62 | 6.0 MB | 1.1 MB | 1.0 MB | 137 KB |
| Stop_Motion_1 | 32 | 3.8 MB | 457 KB | 489 KB | 175 KB |
| Matt_Jon_Shoulders_Transition | 42 | 2.6 MB | 401 KB | 472 KB | 117 KB |
| Stop_Motion_3 (352 px) | 62 | 2.4 MB | 410 KB | 455 KB | 55 KB |
| Kooshy_Mac_Cheese_Pull | 21 | 1.3 MB | 465 KB | 275 KB | 77 KB |
| Sourdough_Stuffing | 14 | 411 KB | 213 KB | 179 KB | 79 KB |
| Hero photo (JPG) | 1 | 318 KB |  |  | WebP 260 KB |

Exact sizes are in `results.json`. Stop_Motion_3 is loaded twice on the page at two sizes; serve the one video and let the browser scale it, which saves the second download entirely.

## How to swap them in (Shopify, about 20 minutes)

1. Shopify admin, Content, Files: upload the `.mp4`, `.webm` and `-poster.jpg` files.
2. In the theme section that holds each animation (Online Store, Themes, Customize, then the section, or Edit code), replace the `<img>` with:

```html
<video autoplay muted loop playsinline preload="metadata"
       poster="POSTER_URL" width="600" height="600" style="width:100%;height:auto">
  <source src="WEBM_URL" type="video/webm">
  <source src="MP4_URL" type="video/mp4">
  <img src="POSTER_URL" alt="">
</video>
```

Use the file URLs from step 1. `muted` and `playsinline` are what let it autoplay on iPhone. The poster paints instantly, the loop starts a moment later.

3. Keep `preload="metadata"` so nothing below the fold downloads until it is near the screen.

That is the whole change. If you want, I will do it on a duplicate theme so you can preview it before publishing.

Chad Waldman, BestDosage
https://www.bestdosage.com/audits/kooshy/