ドキュメントサイトや LP で、操作手順を見せるアニメーション GIF を置いていませんか。GIF は手軽ですが、同じ内容の MP4 に比べて 5〜20倍重い ことが珍しくありません。Lighthouse の「動画形式のアニメーション コンテンツを使用してください」という指摘もこれです。
なぜ GIF は重いのか
- 256色パレットのため、グラデーションや UI のアンチエイリアスでディザが発生し、圧縮が効きにくい
- フレーム間圧縮が非常に原始的（差分領域の切り出し程度）
- デコードがメインスレッド寄りで、大きい GIF はスクロールのカクつきの原因になる
H.264 や VP9 はフレーム間予測が効くので、画面録画のように「ほとんど動かない」映像では特に差が出ます。
置き換えの基本形
<video autoplay muted loop playsinline
width="960" height="540"
poster="demo-poster.webp">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
</video>
ポイント:
-
mutedがないと多くのブラウザで自動再生されません -
playsinlineがないと iOS で全画面再生になります -
width/heightを指定して CLS を防ぐ -
posterを付けると最初のフレームが即表示され、LCP 要素になった場合にも有利
変換の目安
ffmpeg -i demo.gif -movflags +faststart -pix_fmt yuv420p \
-vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -c:v libx264 -crf 26 demo.mp4
-
yuv420pは互換性のため必須。付けないと Safari で再生できないことがあります - 幅・高さは偶数にする（上の
scaleフィルタ） -
+faststartで moov を先頭へ。再生開始が早くなります
ffmpeg を入れていない環境や、デザイナーさんに作業を頼む場合は、ブラウザ内で変換できる Nibbo の GIF→MP4 変換 が便利です。アップロード不要なので社内向け画面の録画でも使えます。
サイズの目安
操作手順の画面録画（1280×720、12秒程度）を想定した、おおよその目安です。実際の値は内容（動きの量、色数）によって大きく変わるので、必ず自分の素材で比べてください。
| 形式 | サイズ |
|---|---|
| GIF | 数MB〜10MB前後 |
| MP4 (H.264, CRF 26) | 数百KB |
| WebM (VP9, CRF 34) | MP4よりさらに1〜3割小さいことが多い |
置き換えないほうがいいケース
-
Markdown をそのまま表示する場所（GitHub の README など）では
<video>が使えない、または制限があります。GitHub は動画のアップロード自体には対応していますが、外部 URL の<video>は表示されません - メールでは動画はほぼ再生されないので GIF のままが無難
-
prefers-reduced-motionのユーザーには自動再生を止める配慮も入れましょう
@media (prefers-reduced-motion: reduce) {
video[autoplay] { display: none; }
.demo-fallback { display: block; }
}
まとめ
GIF を <video autoplay muted loop playsinline> に置き換えるだけで、ページ重量が数MB単位で減ることがあります。Lighthouse の指摘が出ているなら、まず一番大きい GIF から試してみてください。
— Vitalii