UltKit

GIFをAVIFに変換

アニメーションAVIFはimgタグ内でGIFと同じように再生されますが、AV1動画コーデックで圧縮されるため、同じループでもWebページ上の容量はごく一部で済みます。

動画変換

またはMP4, MOV, MKV … ファイルをここにドロップ ·

1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除

出力

ファイルは当社のサーバーで処理され、30分後に削除されます。

このツールの使い方

  1. 1

    GIFを追加する

    アニメーションGIFを最大20個、1ファイルあたり95 MBまでアップロードできます。短いMP4やWebM動画も、そのままアニメーションAVIFに変換できます。

  2. 2

    幅を設定する

    アニメーション出力の幅は初期値で480 pxです。元のGIFの幅のまま変換したい場合は、詳細設定でGIFの幅を入力してください。ループは「無限ループ」のままです。

  3. 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: noGIF to すべての画像ビューアーで開ける: yes
アニメーションAVIFアニメーションAVIF to 1フレームあたり256色を超える色数: yesアニメーションAVIF to なめらかなアルファ境界: yesアニメーションAVIF to 動き予測によるフレーム圧縮: yesアニメーションAVIF to 10-bit color: yes– アニメーションAVIF to すべての画像ビューアーで開ける: no
supported not offeredフォーマットの仕様上の機能です。PCの画像ビューアーやチャットアプリでのアニメーションAVIF対応は、まだ一様ではありません。

GIF

Graphics Interchange Format

GIF は1987年に CompuServe が導入した形式で、短いループアニメーションでは今も最も広く対応しています。可逆ですが、1フレームあたり 256 色のパレットに制限されるため、写真やグラデーションではバンディングやディザリングが目立ちます。透明はオン/オフのみ(1 ビット)で、曲線の縁がギザギザになります。アニメーション GIF は、同じクリップの MP4 や WebP よりはるかに大きくなることがよくあります。すべてのブラウザー、チャットアプリ、SNS で GIF を再生できます。

圧縮方式
可逆
透過
対応
アニメーション
対応
登場時期
1987 · CompuServe
GIF 変換

AVIF

AV1 Image File Format

AVIFは、AV1動画コーデックで圧縮した静止画と画像シーケンスを保存する形式で、2019年にAlliance for Open Mediaが仕様を確定しました。同じ見た目の品質なら、通常JPEGやWebPよりファイルが小さくなり、透過、アニメーション、広色域、HDRにも対応します。エンコードは従来の形式より遅く、低品質設定では非常に細かいテクスチャーがなめらかになりすぎることがあります。主要なブラウザーはすべてAVIFを表示できますが、多くのデスクトップアプリ、SNS、古い端末では開けません。

圧縮方式
非可逆または可逆
透過
対応
アニメーション
対応
登場時期
2019 · Alliance for Open Media
AVIF 変換

サイトの表示速度を重視するなら、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に切り替わるため、画像が表示されないことはありません。