Skip to content

Convert animated GIFs to MP4 to cut file size (#119)#125

Merged
jonfroehlich merged 1 commit into
mainfrom
chore/gif-to-mp4
Jun 24, 2026
Merged

Convert animated GIFs to MP4 to cut file size (#119)#125
jonfroehlich merged 1 commit into
mainfrom
chore/gif-to-mp4

Conversation

@jonfroehlich

Copy link
Copy Markdown
Member

Re-encodes the GIFs referenced from published lessons to H.264 MP4 and removes the originals, per #119. Builds on #120 (movies/videos/), following the agreed "rename first, then convert" order.

What changed

  • 27 referenced GIFs → MP4 (libx264 -crf 23 -pix_fmt yuv420p -movflags +faststart -an, with an even-dimension scale filter), and each ![alt](x.gif) swapped to a muted autoplay/loop <video aria-label="alt">. Table cells use the single-line <video src=…> form so they stay inside the table.
  • 50 GIFs deleted — the converted originals plus commented-out and never-referenced orphans (full list in the diff).
  • 2 same-name source MP4s preserved over GIF transcodes. Where the repo already had a same-name .mp4, that source is used instead of re-deriving from the degraded GIF. The oversized 13.6 MB Arduino_LEDBlink_Pin3.mp4 was re-encoded to 1.2 MB at source quality (it was even bigger than its GIF).
  • OG social cards fixed. 8 arduino pages set image: to a hero GIF that's now a <video>; social crawlers can't render video, so I regenerated static posters with generate_og_posters.py and repointed image: at assets/og/<page>.jpg. Updated the website-dev.md front-matter example to led-fade's real poster path to stay accurate.

Out of scope

signals/ GIFs are untouched — those notebooks are migrating to makeabilitylab/signals (#116).

Net size impact

~119 MB removed: 112.7 MB of GIFs + 12.4 MB from the LEDBlink re-encode, against 5.8 MB of new MP4s + posters.

Verification

  • bundle exec jekyll build clean (Jekyll 4)
  • Built _site has zero .gif refs in arduino/electronics/esp32/sensors; all MP4s + posters resolve; heroes render as <video>
  • All new <video> elements carry aria-label (media-a11y gate) — CI's html-proofer link-check + media-a11y are the backstop

Note / possible follow-up

The electronics/assets/gifs/ dir now holds .mp4 files (the dir name is a slight misnomer). Left as-is to keep this PR focused; could be renamed in a small follow-up if desired.

🤖 Generated with Claude Code

Re-encode the 27 GIFs referenced from published lessons to H.264 MP4
(crf 23, faststart, even-dimension scale) and swap each `![alt](x.gif)`
to a muted autoplay/loop `<video aria-label="…">` (single-line `<video
src>` form inside table cells). Removes all 50 unreferenced/orphaned
GIFs (the converted originals plus commented-out and never-referenced
clips).

For the 2 clips that already had a same-name source MP4 in the repo,
the source MP4 is used rather than a GIF transcode — and the oversized
13.6 MB Arduino_LEDBlink_Pin3.mp4 is re-encoded down to 1.2 MB at
source quality.

OG social cards: 8 arduino pages had `image:` pointing at a hero GIF
that's now a `<video>`. Regenerated static posters via
generate_og_posters.py and repointed `image:` at `assets/og/<page>.jpg`
(social crawlers can't use video). Updated the website-dev.md front-
matter example to led-fade's real poster path to match.

signals/ GIFs are untouched (migrating to makeabilitylab/signals, #116).

Net: ~119 MB removed (112.7 MB GIFs + 12.4 MB from the LEDBlink
re-encode, vs 5.8 MB of new MP4s/posters). `bundle exec jekyll build`
clean; built _site has zero .gif refs in arduino/electronics/esp32/
sensors and all videos/posters resolve. html-proofer link-check +
media-a11y CI gates are the backstop.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@jonfroehlich jonfroehlich merged commit dffc7a5 into main Jun 24, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant