動画を軽量化してサイトのパフォーマンスを改善する方法

2017/06/30

最初に動画の軽量化の前置きとして動画を取り巻く環境について
筆者は同年代の若者共通の話題iPhoneやスマホについてあまりコメントしません。
しかし今日はスーパー珍しく動画とスマホの関りを含め短く記します。

スマホやiPhoneの画面

iPhoneやスマホはその昔、パソコンの画面が年を追うごとに大型化した歴史と同じ道をたどっています。

Appleから発売されたiPhone3GS→iPhone5→iPhone6 + 6 Plusとどんどん画面は大型化し、iPhone6 登場時にはiPhone5時代からワンステップ大きくなるだでは足りず更にデカい6 Plusも同時発表されました。

iPhone7になって大型化は落ち着いたかのように見えますが次期iPhoneではGalaxy S8,Essential Phoneの様なベゼルレスになるらしく、やはり画面の大型化は必然でしょう。

ぶっちゃけ持ちにくにも関らずなぜ大型化したのか。
答えは

コンテンツが文字主体のサイトからYouTube等の動画に移行しているためです。

また動画再生を支えるGPUの向上やバッテリーの持ち
本体の大型化でバッテリーの容量アップもできた。
また4G,LTEが普及し動画コンテンツに耐えられる回線速度ができた。

など多くの基盤が整備され動画コンテンツの流入につながっているとおもわれます。

今まではFlashアニメーションやGIFで表現してきたサイトですが動画いれたらもっとかっこいーじゃんという流れになり始めています。

YouTubeの動画埋め込みiframeを使う方法もありますが自前で作った動画を柔軟に扱うため自ら動画をsrcタグで埋め込むことも多くなってきています。

スマホやiPhoneが動画をみるためのデバイスになってきてることは確認しましたが
ここでYouTube等を使わずにサイトに動画をのせる際の問題が二つあります。

近年カメラ性能向上により画質も向上したことで動画容量がとてつもなくデカい点です。

試しに手元のiPhoneやスマホで自分が撮った動画サイズを確認してみてください。

ざらに500MB越え、1GB越えなんて動画も多いでしょう。

二つ目の問題点はスマホやiPhoneで動画を見る際、WiFiでなければau,DoCoMo,Softbankといったキャリアの通信制限が壁になる点です。

通信制限と容量がデカい動画は水と油です。
それを解決するため動画を圧縮します。

動画を軽量化するにあたり今回は
オンラインサイトとソフトの二つを紹介します。

一つ目はサインアップするだけ動画コンバーター:clipchamp

月5回まで動画を圧縮できるオンライン圧縮サイトです

ログインすると右側にCompress my videosと表示されるのでクリックします。
今回はテストに手元にあった6.9MBのファイルを使ってみました。

左側の設定にて画質やフォーマットを指定できます。

6.9MBが1.9MBに圧縮されました

Googleアカウントでも登録できるので簡単にサインインできます。
他にもサインアップせず使える動画変換サイトがありますが動画コンバーターを紹介しました。

二つ目はYouTube御用達ffmpeg

動画コンバーターに使った同じ動画ファイル6.9MBを使います。

[bash]
ffmpeg -i video.mp4 -c:v libx264 -preset veryfast -crf 32 -c:a aac -b:a 128k out.mp4
[/bash]

解説
-i: video.mp4など圧縮したい動画を指定します。

-preset: 圧縮速度を設定
ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow
veryslowは圧縮に時間がかかるが最も圧縮率が高い。ultrafastはその逆です。

-crf: 画質を調整: 0がロスレス,値が高くなると画質が落ちます。

-c:a: オーディオコーデックの指定。

-b:a オーディトビットレートの指定。

out.mp4は変換後の動画ファイル名にします。
codecにどのデイバイスでも再生できるx264を使います。
x265はスマホによって再生できないことがあります。
iPhone7では再生を確認できました。

変換後6.9MBから444.5KBに圧縮されました。

動画を圧縮することで画質は落ちてしまいますが、サイト上の背景に動画を載せる時など100MB単位という動画は現実的にデカ過ぎて誰もみないでしょう。
サイトで動画を使った背景等、デザインの一部という場合は多少画質が落ちてもサイズが小さいほうがロードタイム減少になりユーザーにとってはベストです。

コンテンツがユーザーにとってどれだけ重要なものなのかで判断する必要がありますが
ユーザーにとって重要なコンテンツであれば圧縮せずYouTubeにアップロードする方法が利便性は高いです。

ffmpegを使った動画の圧縮にはGPUよりもCPUを使うためCore i7やRyzenなどを使うことで更にバク速でエンコードが完了するでしょう。

それではDo-you-linux.com読者の皆さんも良い週末を！