🔵 Optimize site images for web delivery (25 MB GIF, multi-MB PNGs)

[drewferg11-hermes-bot]

Goal

Several images in docs/assets/ are excessively large for web delivery, causing slow page loads especially on mobile.

Issues found

File	Size	Used in
split-flap.gif	25.9 MB	README (GitHub)
split-flap-display-banana.png	3.9 MB	og:image (once path fixed)
sfd-1.jpg	2.5 MB	Dual display overview
37-flap-main.png	4.4 MB	Original display hero
48-flap.png	3.1 MB	Print files preview
8-modules.png	4.3 MB	Build overview

The og:image should be ~1200×630 and under 1 MB for social previews. The GIF should be converted to MP4 (10× smaller, better quality).

Acceptance criteria

• Hero/overview images are compressed to reasonable web sizes (under ~500KB each for JPEGs, under ~1MB for PNGs with transparency)
• split-flap.gif converted to MP4 or WebM for README use
• og:image is under 1 MB and ~1200×630
• Visual quality is preserved — no noticeable compression artifacts on the display/flap details
• All existing image references in the docs still resolve correctly

Files / areas involved

• docs/assets/display/ — all images
• overrides/main.html — og:image reference
• README.md — GIF reference (if converting)

Constraints

• Preserve the original files in case the compressed versions need to be redone
• Don't change any markdown image references — just swap the underlying files (or use the same filenames)
• If converting GIF to MP4, update the README to use an HTML video tag instead of ![]()