タイトル: アニメーション コンテンツでの動画フォーマットの使用
SEOタイトル: PageSpeed『アニメGIFを動画に』の対処｜MP4/WebMへの置き換え方法
PageSpeed Insightsの「アニメーション コンテンツでの動画フォーマットの使用」は、ページ内のアニメーションGIFをMP4やWebMといった動画フォーマットに置き換えることで、ファイルサイズを大幅に削減し読み込みを高速化できることを示す改善提案です。アニメーションGIFは画像ファイルでありながら多数のフレームを内包するため非常に重くなりやすく、同じ見た目を動画で再現すると数分の一から数十分の一程度まで容量を圧縮できるケースが多いとされています。この記事では、この指摘が何を意味するのか、なぜGIFが重いのか、そしてどのように動画へ置き換えればよいのかを順を追って解説します。
| この記事の要点 |
|---|
|
指摘の意味 ―「動画フォーマットを使う」とは何か
PageSpeed Insightsがこの項目を表示するのは、ページ内に容量の大きいアニメーションGIFが含まれており、それを動画フォーマットに変換すれば転送量を削減できると判定した場合です。ここで言う「動画フォーマット」とは主にMP4（H.264など）やWebM（VP9・AV1など）を指します。
ポイントは、見た目の動き自体を変えずに「ファイルの中身の持ち方」を変えるという点にあります。アニメーションGIFも動画も「連続するフレームを再生して動きを表現する」という目的は同じですが、その符号化方式の効率に大きな差があります。一般に、動画フォーマットのほうがはるかに高い圧縮効率を持つため、同じ尺・同じ解像度のアニメーションでもファイルサイズを小さくできる傾向があります。結果として、ダウンロードに必要なデータ量が減り、ページの表示が速くなることが期待できます。
なぜアニメーションGIFは重くなりやすいのか
GIFは1980年代後半に登場した古い画像フォーマットで、もともと静止画用に設計されたものにアニメーション機能が後から加えられた経緯があります。動画専用に設計されたMP4やWebMと比べると、次のような構造的な制約から容量が大きくなりやすい傾向があります。
- 1フレームあたりの色数が最大256色に制限される: 写真のように多くの色を含む映像では色数を減らす処理が必要になり、また色数を保とうとすると効率が落ちます。
- フレーム間圧縮の仕組みが限定的: 動画フォーマットは前後のフレームの差分だけを記録する手法を高度に用いてデータを削減しますが、GIFはこうしたフレーム間予測が弱く、変化の少ない映像でも無駄が生じやすいとされています。
- 可逆圧縮が基本: GIFは情報を厳密に保つ圧縮方式を採用しており、動画のように人間が気づきにくい範囲で情報を間引いて大幅に圧縮する、という発想が前提にありません。
これらの要因が重なり、同じ尺・同じ解像度のアニメーションでも、GIFは動画フォーマットと比較してファイルサイズが大きくなりやすくなります。容量が大きいほど読み込みに時間がかかるため、PageSpeed Insightsで改善提案として挙げられるわけです。
対処 ― GIFを動画に変換して<video>で表示する
基本的な対処は、(1) アニメーションGIFをMP4とWebMの動画ファイルに変換し、(2) imgタグではなくvideoタグで表示する、という二段階です。GIFは自動的に再生されループする挙動が当たり前のため、動画でも同じ体験を再現するための属性指定が重要になります。
GIFと同じ挙動を再現するための属性
- autoplay: ページ表示時に自動で再生を開始します。
- muted: 音声を無音にします。多くのブラウザでは無音でない動画の自動再生はブロックされるため、自動再生と組み合わせる場合は事実上必須です。
- loop: 再生が終わると先頭に戻って繰り返します。GIFのループ挙動に対応します。
- playsinline: スマートフォン等で全画面に切り替わらず、ページ内インラインで再生させるための指定です。これがないと一部の環境で自動再生が意図通りに動かないことがあります。
ffmpegを使った変換例
動画への変換には、コマンドラインツールのffmpegがよく利用されます。GIFからMP4とWebMをそれぞれ生成する例を示します。
# GIF を MP4(H.264) に変換 ffmpeg -i input.gif -movflags +faststart -pix_fmt yuv420p \ -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4
# GIF を WebM(VP9) に変換 ffmpeg -i input.gif -c:v libvpx-vp9 -b:v 0 -crf 30 output.webm |
MP4変換時の-pix_fmt yuv420pは幅広い再生環境での互換性を確保するための指定、-movflags +faststartは再生開始を早めるためにメタデータを先頭に配置する指定です。scaleのフィルタは、H.264が縦横を偶数ピクセルとして扱う前提のため、奇数サイズのGIFでエラーになるのを防ぐための調整です。WebM側の-crfは品質とサイズのバランスを決める値で、数値が大きいほどファイルは小さく、画質は下がる方向に働きます（実際の最適値は素材により異なります）。
フォーマット比較
GIF・MP4・WebMの大まかな特徴を比較します。実際のサイズ削減率は映像の内容・尺・解像度・エンコード設定によって変わるため、下表の数値感は一般的な目安です。
| フォーマット | 種別 | サイズ傾向 | ブラウザ対応 | 主な用途 |
|---|---|---|---|---|
| GIF | 画像 | 大きい | ほぼすべての環境 | 従来のアニメーション画像 |
| MP4 (H.264) | 動画 | 小さい | 主要ブラウザで広く対応 | 互換性重視のフォールバック |
| WebM (VP9 / AV1) | 動画 | より小さい場合が多い | 主要ブラウザで対応(一部古い環境を除く) | 容量削減を優先する第一候補 |
MP4とWebMは、どちらか一方だけでも多くの環境をカバーできますが、両方を用意してsource要素で並べておくと、ブラウザが対応する形式を選んで再生してくれるため、互換性と容量削減の両立を図りやすくなります。
実装HTML例
GIFを置き換えるvideo要素の記述例です。WebMを先に、MP4を後に並べることで、対応するブラウザはWebMを、対応しないブラウザはMP4を選んで再生します。
<video autoplay muted loop playsinline width="640" height="360"> <source src="animation.webm" type="video/webm"> <source src="animation.mp4" type="video/mp4"> <!-- 動画非対応環境向けのフォールバック --> <img src="animation.gif" alt="アニメーションの説明"> </video> |
widthとheightを明示しておくと、ブラウザが表示領域をあらかじめ確保できるため、読み込み中にレイアウトがずれる現象（レイアウトシフト）を抑えやすくなります。imgのフォールバックは、video要素に対応していない極めて古い環境向けの保険であり、必須ではありません。
落とし穴と注意点
| 落とし穴 | 内容と対策 |
|---|---|
| 自動再生がブロックされる | 多くのブラウザは、音声付き動画の自動再生をユーザー操作なしには許可しません。mutedを付けて無音にすることが、自動再生を成立させる前提となります。 |
| muted の付け忘れ | autoplayだけ指定してmutedを忘れると、再生が始まらずGIFのような体験が再現できません。両者はセットで考えるのが基本です。 |
| フォールバックの欠如 | 特定フォーマットしか用意しないと、未対応のブラウザで何も表示されない可能性があります。MP4とWebMを併記し、必要に応じて代替表示を用意すると安全です。 |
| LCP(最大コンテンツの描画)への影響 | 画面内で大きく目立つ動画は、表示速度の指標であるLCPの計測対象になり得ます。重要な領域に置く場合は容量や読み込み方法に配慮し、必要なら遅延読み込みの適用範囲を慎重に検討します。 |
| 省電力・通信節約設定での停止 | 端末やブラウザの省電力モード、通信量節約モードでは自動再生が抑制されることがあります。自動再生に依存しすぎず、再生されない場合でも情報が伝わる構成にしておくと安心です。 |
よくある質問
Q1. GIFを動画に変換すると画質は落ちますか。
動画フォーマットは情報を一部間引いて圧縮するため、設定次第ではわずかに画質が変化することがあります。ただしGIFは色数が256色に制限される一方、動画はより多くの色を扱えるため、グラデーションの多い映像ではむしろ見た目が改善する場合もあります。エンコード時の品質設定を調整して、容量と画質のバランスを取るのが一般的です。
Q2. すべてのアニメーションGIFを動画に置き換えるべきですか。
容量の大きいGIFほど置き換えの効果が大きくなります。一方で、ごく小さく軽量なGIFや、メール本文・一部の限定的な環境のようにvideo要素が使えない場面では、置き換えのメリットが小さい、あるいは置き換え自体が適さないこともあります。PageSpeed Insightsが具体的に指摘しているファイルから優先的に対応するのが現実的です。
Q3. MP4とWebMのどちらか一方だけでも問題ありませんか。
MP4（H.264）は対応環境が非常に広いため、まずMP4を用意すれば多くのユーザーをカバーできます。そのうえでWebMを追加すると、対応ブラウザではさらに容量を削減できる可能性があります。互換性を最優先するならMP4のみ、容量削減も狙うなら両方を併記する、という考え方が分かりやすい指針です。