Help us understand the problem. What is going on with this article?

ウェブで使用する動画のクオリティ(解像度とFPS)はもっと下げていいのでは

More than 1 year has passed since last update.

静岡が誇るローカルファミレス「さわやか」のサイトにデスクトップブラウザでアクセスするとハンバーグをジュウジュウする動画が自動再生されます(2019年8月現在)。

キャプチャ2.gif

スマホブラウザでも動画のインライン自動再生の環境が整い、こういったサイトはよく見かけるようになりました。パフォーマンスを気にしがちなエンジニアからすれば動画の乱用は避けたいものですが、さわやかのサイトで最大の売りであるハンバーグを見せつける動画をいきなり流すことは良いなと思います。

しかし、この動画は1分間のフルHD(1920x1080)。ファイルサイズは46MBとかなり大きいものになります。too muchではないか。

異なる解像度とFPSの動画を見れるデモを作ってみました

以下、これを参考にして私見を述べます。

メインで見せる動画でも表示するピクセル数程度でいいのでは

メインで大きく表示する動画でも最大でもHD(1280x720)で十分ではないかと。そもそも私たちは映画をゆったり見るためにサイトに訪れるわけではないですし。スマホブラウザなら横幅400px程度で十分かと。

つまり動画のサイズは最大でも表示するピクセル数あれば十分かと思いますが、どうでしょう?

装飾として使用する動画のクオリティはもっと下げられる

例えば背景に動画を使用してるタイプのやつです。パフォーマンスを突き詰めると動画使わない方がいいじゃんってことになっちゃいますが。動画の上にテクスチャをひくような使い方であればなおさら気になりません。表示するピクセル数の半分くらいのサイズで良いのではと思います。いかがでしょう?

FPSも下げられる

解像度だけでなくFPSを下げてファイルサイズを減らすこともできます。ただ解像度ほど劇的にファイルサイズは減りません。15FPSくらいまでは十分に見れます。10FPS以下になってくると明らかにカクカクしてGIFアニメのようになりますが、あえてカクカクした動画として表示するのも十分にありかと思います。

ksk1015
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした