GIFをAVIFに変換
アニメーションAVIFはimgタグ内でGIFと同じように再生されますが、AV1動画コーデックで圧縮されるため、同じループでもWebページ上の容量はごく一部で済みます。
動画変換
またはMP4, MOV, MKV … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
値が小さいほど高画質でファイルも大きくなります。18 は元と見分けがつかない画質、23 が初期値、28 以上では目に見えてぼやけます。
1 秒あたりのフレーム数です。プラットフォームから指定がない限り、元のレートのままにしてください。GIF なら 15–20 fps で十分です。
PowerPoint ファイルと静止画 1 枚の場合のみ使用します。各スライドまたは画像を表示する長さです。
自動では、MP4/MOV に AAC、WebM に Opus を使用します。「元の音声をコピー」は、変換先の形式が対応している場合に元の音声をそのまま保持します。
音楽なら 192 kbps で元と聞き分けられません。会話なら 128 kbps で十分です。
アニメーションの幅をピクセルで指定します。高さは縦横比に合わせて決まります。チャットなら 480 px が適しています。720 px 以上だと高画質な GIF になりますが、ファイルサイズはかなり大きくなります。
GIF は最大 256 色です。色数を減らすとファイルは小さくなりますが、グラデーションや肌の色に縞模様が出ます。
パレットの色を細かいパターンで混ぜて、縞模様を目立たなくします。Sierra が最もなめらかで、なしが最小サイズです。
アニメーションを無限に繰り返すか、1 回だけ再生して止めるかを選びます。
任意です。秒数(例: 75)または分:秒(1:15)で指定します。空欄にすると最初から始まります。
任意です。開始時間と同じ形式で指定します。空欄にすると最後までそのまま残ります。
変換後のファイルは、このサイズちょうどかそれをわずかに下回るサイズになります。
このツールの使い方
- 1
GIFを追加する
アニメーションGIFを最大20個、1ファイルあたり95 MBまでアップロードできます。短いMP4やWebM動画も、そのままアニメーションAVIFに変換できます。
- 2
幅を設定する
アニメーション出力の幅は初期値で480 pxです。元のGIFの幅のまま変換したい場合は、詳細設定でGIFの幅を入力してください。ループは「無限ループ」のままです。
- 3
AVIFに変換する
AVIFに変換 →を押して、.avifファイルをダウンロードします。そのままサイトのpicture要素に組み込めます。
WebサイトでGIFをAVIFに変換する理由
GIFはすべてのフレームを256色の別々の画像として保存します。数秒の製品デモや画面録画の操作解説でも数MBになることがあり、ランディングページではこの1枚の画像がコード全体より重くなることも珍しくありません。GoogleのLighthouse監査には、まさにこうしたファイルを対象にした「アニメーション コンテンツには動画フォーマットを使用する」という専用のチェックがあります。
AVIFは2019年にAlliance for Open Mediaが策定を完了した静止画フォーマットで、AV1動画コーデックをHEIFコンテナに収めたものです。アニメーションAVIFはAV1画像シーケンスで、動画ファイルと同様に後続フレームを前のフレームから予測するため、フレーム間の変化分だけがデータ量になります。
GIFとアニメーションAVIFの比較:AVIFで得られること
| from ↓ · to → | 1フレームあたり256色を超える色数 | なめらかなアルファ境界 | 動き予測によるフレーム圧縮 | 10-bit color | すべての画像ビューアーで開ける |
|---|---|---|---|---|---|
| GIF | – GIF to 1フレームあたり256色を超える色数: no | – GIF to なめらかなアルファ境界: no | – GIF to 動き予測によるフレーム圧縮: no | – GIF to 10-bit color: no | GIF to すべての画像ビューアーで開ける: yes |
| アニメーションAVIF | アニメーションAVIF to 1フレームあたり256色を超える色数: yes | アニメーションAVIF to なめらかなアルファ境界: yes | アニメーションAVIF to 動き予測によるフレーム圧縮: yes | アニメーションAVIF to 10-bit color: yes | – アニメーションAVIF to すべての画像ビューアーで開ける: no |
GIF
Graphics Interchange Format
GIF は1987年に CompuServe が導入した形式で、短いループアニメーションでは今も最も広く対応しています。可逆ですが、1フレームあたり 256 色のパレットに制限されるため、写真やグラデーションではバンディングやディザリングが目立ちます。透明はオン/オフのみ(1 ビット)で、曲線の縁がギザギザになります。アニメーション GIF は、同じクリップの MP4 や WebP よりはるかに大きくなることがよくあります。すべてのブラウザー、チャットアプリ、SNS で GIF を再生できます。
- 圧縮方式
- 可逆
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 1987 · CompuServe
AVIF
AV1 Image File Format
AVIFは、AV1動画コーデックで圧縮した静止画と画像シーケンスを保存する形式で、2019年にAlliance for Open Mediaが仕様を確定しました。同じ見た目の品質なら、通常JPEGやWebPよりファイルが小さくなり、透過、アニメーション、広色域、HDRにも対応します。エンコードは従来の形式より遅く、低品質設定では非常に細かいテクスチャーがなめらかになりすぎることがあります。主要なブラウザーはすべてAVIFを表示できますが、多くのデスクトップアプリ、SNS、古い端末では開けません。
- 圧縮方式
- 非可逆または可逆
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 2019 · Alliance for Open Media
サイトの表示速度を重視するなら、GIFをAVIFに変換するのが効果的です。ヒーローのループ、製品デモ、UIの操作解説は、imgタグで自動再生される動作そのままに、データ量が大きく減り、256色によるバンディングもなくなります。
アニメーションAVIFへの置き換えが適している場面
AVIFが向いているもの
- 自社サイトのヒーローや機能紹介のループ
- グラデーションや影を使った製品UIのデモ
- 読み込み時間やCore Web Vitalsで評価されるページ
- やわらかい透明の境界が必要なアニメーション
GIFのままがよいもの
- メールマガジンや署名
- GIFしかプレビューできないフォーラムやチャットアプリ
- 古いCMSへのアップロード
- 後でフレームを編集する相手に渡す場合
フォールバック付きでアニメーションAVIFを配信する
現行のChrome、Edge、Firefox、Safariはいずれもアニメーションに対応しており、Firefoxはバージョン113で最後に対応しました。GIFをフォールバックにしてpicture要素で公開すれば、追加の手間なく古いブラウザーも守れます。AVIFのエンコードはGIFの書き出しより時間がかかるため、長いクリップはWebPに変換する場合より明らかに時間がかかります。
ループをご自分のサイトではなくチャットアプリに送るなら、動画ファイルのほうが安全です。GIFをMP4に変換なら、どこでも再生できます。3つの新しい画像フォーマットの違いはAVIF・HEIC・WebPの解説で詳しく比較しています。
GIFからAVIFへの変換に関する質問
アニメーションAVIFはGIFと同じようにループしますか?
はい。ループオプションは「無限ループ」に設定されており、ブラウザーはimgタグ内のGIFと同じようにAVIF画像シーケンスを繰り返し再生します。操作ボタンや音声はありません。最後のフレームで止めたいイントロアニメーションには「1回のみ再生」を選んでください。
AVIFが最初のフレームしか表示されないのはなぜですか?
ビューアーが静止画のAVIFには対応していても、AVIF画像シーケンスには対応していません。古い画像ビューアーや、2023年にリリースされたバージョン113より前のFirefoxがこの状態です。最新のChrome、Edge、Firefox、Safariでファイルを開いて、アニメーションを確認してください。
AVIFでもGIFの透過背景は保たれますか?
AVIFは完全なアルファチャンネルに対応しているため、ピクセルのオン・オフだけのGIFよりも透明を美しく保てます。元のGIFに埋め込まれた背景色(マット色)はそのまま残るので、公開前に色付きや市松模様の背景で結果を確認してください。
アニメーションAVIFはWordPressにアップロードできますか?
2024年にリリースされたWordPress 6.5で、サーバーの画像ライブラリが対応していればメディアライブラリにAVIFを追加できるようになりました。古い環境ではアップロードが拒否されるため、その場合はGIFのままにするか、WordPress 5.8以降で使えるGIFをWebPに変換をご利用ください。
GIFをフォールバックにしてAVIFを表示するにはどうすればよいですか?
両方をpicture要素で囲みます。type属性にimage/avifを指定したsourceタグでAVIFを指し、その後ろにGIFのimgタグを置きます。AVIFをデコードできるブラウザーは軽いファイルを使い、それ以外はGIFに切り替わるため、画像が表示されないことはありません。