動くメディアは画面の雰囲気を大きく変えますが、静止画よりも多くのデコード用メモリーと電力を使います。性能はファイルサイズだけでは判断できません。表示サイズ、フレームレート、コーデック、同時に動く要素数がすべて影響します。
一度に1項目だけ変えてカクつきの原因を探す
準備
プロジェクトを複製するか.ambientpackでバックアップします。同じブラウザー・ウィンドウサイズ・電源状態で比較します。速度改善を保証するベンチマークではありません。
手順
- 元の作品を60秒再生し、同時再生メディア数・品質モード・見た目のカクつきを記録します。比較中は品質モードを変えません。
- 複製側で動くメディアを1つ非表示にし、同じ部分を60秒再生します。複数の設定を同時に変えず、何を隠すと変わったかを記録します。
- 大きなGIFが原因なら原本を保管し、同程度の解像度の動画に置き換えて比較します。動画最適化を使える場合は30fpsまたは24fpsの結果と画質を確認します。
- 動く要素を動画化するときはループに合う長さで記録し、先頭と末尾を確認します。時計と音声は動画化の対象外なので別に維持します。
結果の確認
同じ条件でカクつき・画質・ループのつながりを判断します。ファイルが小さくなってもメモリやCPU使用量が必ず減るわけではありません。
想定と異なる場合
ループ境界で飛ぶ場合は記録時間と各効果の周期を確認します。改善しなければ原本を保ち、素材の解像度と同時再生数を見直します。
GIFと動画のどちらを使うべきですか？
GIFは短い透明ステッカーや単純なループに便利です。色数の多いフルスクリーン映像では、GIFの圧縮とフレームデコードの負荷が比較的大きいため、同程度の画質なら動画のほうが効率的な場合が多くあります。
大きな動画背景にはWebMまたはMP4を検討し、GIFは簡単なアニメーション手順や透過が必要な小さな要素に使うのがおすすめです。
適切な解像度とフレームレートを選ぶ
- 小さな装飾要素に4K素材を使用しないでください。
- 雲、雨、ゆっくりした光の動きは24fpsでも自然に見える場合があります。
- 穏やかな動きでは、30fpsを超えても見た目の差より消費電力の増加が大きい場合があります。
- 元の画面比率を保ちながら、実際の表示サイズに近い大きさで書き出します。
Studioの性能ツールを使う
編集中にGIFを一時停止すると、レイアウト作業中の不要なデコードを減らせます。プレビューとフルスクリーンでは動きが再開され、完成状態を確認できます。
自動測定と品質調整はユーザーが選択できます。静的要素の結合では、動かない背景・画像・固定テキストを一枚の画像にできます。動く要素の動画化では、複数のアニメーション要素を一つの動画にまとめられます。ScreenWispは復元可能な元の状態を保持しますが、別途プロジェクトをバックアップすることもおすすめします。
フレーム落ちはこの順で確認する
- 同時に再生するGIF・動画の数を減らします。
- フルスクリーンメディアの解像度とフレームレートを下げます。
- ブラウザーのハードウェアアクセラレーションが有効か確認します。
- 負荷の高いほかのタブやアプリを閉じ、フルスクリーンでもう一度測定します。
- ノートPCのバッテリーモードでは利用できる性能が低下する場合があります。
読むだけでなく、実際の流れを試してみましょう
ScreenWispなら、アカウント登録やメディアのアップロードなしで、ブラウザー内にフルスクリーン画面を作成してプレビューできます。
Studioで作成 ↗