アニメーション画像の軽量化：短尺ループを WebP/MP4 最小コスト化

# 1) 60fps 録画素材を 30fps へ正規化 + クロップ + ループ分トリム
ffmpeg -i input.mov -vf "fps=30,scale=iw:-2,trim=0:2.4" -an normalized.mp4

# 2) 往復(首振り)アニメを ping-pong 化（逆順連結）
ffmpeg -i normalized.mp4 -filter_complex "[0:v]split[v1][v2];[v2]reverse[r];[v1][r]concat=n=2:v=1:a=0" pingpong.mp4

# 透過が必要な場合の Animated WebP (lossy, q=80 相当)
ffmpeg -i pingpong.mp4 -vf "fps=30,format=rgba,scale=640:-2" -loop 0 -c:v libwebp_anim -quality 80 loop.webp

# 透過不要なら MP4 (H.264) + poster
ffmpeg -i pingpong.mp4 -c:v libx264 -pix_fmt yuv420p -profile:v high -crf 26 -movflags +faststart loop.mp4
ffmpeg -i loop.mp4 -vf "select=eq(n\,0)" -frames:v 1 poster.jpg

/* 形式判定最小ルール
  - 透明/アルファ変化あり: Animated WebP
  - 輪郭クッキリ/静止区間が多い: 動画 (MP4/WebM) Inter-frame で高圧縮
  - 2秒以下シネマ風 or 連続UIハイライト: Animated WebP も可 (差分圧縮効く)
  - 端末CPUが弱い & 複数同時再生: MP4(H.264 baseline/high) を優先
*/

<!-- 自動再生安全条件: muted + playsinline + 無限ループ -->
<video
  src="/media/loop.mp4"
  poster="/media/poster.jpg"
  autoplay
  muted
  loop
  playsinline
  width="640" height="360"
  fetchpriority="low"
></video>

// 画質/差分計測 (例: node + ssim library 擬似コード)
import { compare } from 'ssim';
const base = await loadImage('baseline.png');
const latest = await loadImage('latest.png');
const { mssim } = compare(base, latest);
if (mssim < 0.98) throw new Error('Quality regression: ' + mssim);