Webサイトの背景に動画が入るデザインを制作したのですが(関連記事)、ひとつ大きな問題がありました。それは「ファイルサイズが大きすぎて読み込みが遅くなる問題」です。 適切な制作方法や平均ファイルサイズを説明しているサイトがなかったので、今回は実際に制作した際に行なったことをまとめました。 普通に制作するとファイルサイズは20MB強になる Adobe premiereでサイズ1280x720px、30秒程度の動画を作ると20MBを超えてしまいます。Webの素材としてはファイルサイズが大きすぎて、このままでは使えません。 平均サイズ(目標)を調べる ここで同じように動画を背景に配置しているサイトの動画ファイルサイズを調べました。 ざっと調べると以下のような結果に。 DeNA 採用サイト