GIF ローダーとベクター アニメーション: チームが UI でアニメーション化された GIF を置き換える理由

GIF できること、できないこと

MDN の画像形式ガイドでは、GIF の各ピクセルが最大 256 色のパレットへのインデックスであると説明し、GIF などの古い形式は WebP や AVIF などの新しい形式と比べてパフォーマンスが低いと述べています。 UI の場合、実際的な問題は、グラデーションのバンディング、透明な背景のギザギザのエッジ、高密度画面でのスケーリングのぼやけ、およびアプリの動作に応答する方法がないことです。

代わりに何を使用するか

アニメーションが何をする必要があるかによって選択してください。

• シンプルなスピナーまたはパルス: CSS アニメーションまたはインライン SVG。小さく、シャープで、動きを軽減するために簡単に一時停止できます。
• イラスト付きループまたはアイコン: Lottie またはアニメーション SVG。ベクター、スケーラブル、単純なアートワーク用に小さい。
• 写真または複雑な映像: ビデオ (WebM または MP4) またはアニメーション WebP/AVIF (GIF ではありません)。
• 成功またはエラーに変わるローダー: アプリの状態によって駆動される、ExodeUI や Rive などの状態ベースのランタイム。

ローダーは何が起こっているかを把握する必要があります

GIF は、リクエストに 1 秒かかったとしても 1 分かかったとしても同じようにループし、作業が完了したときにチェックマークになることはできません。状態ベースのローダーは、読み込みから成功またはエラーに移行し、進行状況を表示することができるため、回転する画像よりもはるかに多くのことを人々に伝えることができます。

アクセシビリティ

ループ GIF は、独自にモーション低減設定を尊重できません。 CSS、SVG およびランタイム アニメーションは、ユーザーがモーションを減らしたい場合に一時停止したり簡略化したりできます。また、ローダーに「結果の読み込み中」などのアクセス可能なラベルを付けて、スクリーン リーダー ユーザーが何が起こっているかを把握できるようにします。