Optimizing video for web

[Sphere_Nine]

Hi All,

I'm a web designer, and I'm working with video for the first time. I'm working on a client site, and the client wants to use this video as a background for a splash page:

http://www.istockphoto.com/video/portland-head-lighthouse-gm504021876-83183531?st=5678fce

We've downloaded the largest file offered, which comes in at 4GB. Since this is a background for a splash page, I'm thinking we wouldn't want to go any smaller than the HD file (1920 x 1080), which I'm guessing will be around 1GB. So I've got a couple of questions:

1. Is there a recommended maximum file size for using a video as a background?

2. Are there any tools we could use to reduce the file size below recommended without sacrificing quality?

Thanks in advance for any assistance.

Sam

[mulvya]

More than the absolute file size, the bitrate should not exceed 2, maybe 3 mbps. ffmpeg has encoders for all 3 formats commonly requested H.264 in MP4 (x264), VP9 in WebM (libvpx-vp9) and Theora in OgV (libtheora).

In that particular video, the rest of the composition is fine, but the waves set a higher bitrate floor than you would have than if it were something static or less noisy.

Mind you, for a BG video, 1080p isn't really needed. 720p output will do.

[Jamaika]

I don't know why you are interested animation with the function of lossless (PNG/BPG/WebP/WebM/FliF/Daala/CineForm). It hasn't control over the size of the file. MOV container is probably 4K H264. So in this case I would use HEVC.

[sneaker]

I don't know why you are interested animation with the function of lossless (PNG/BPG/WebP/WebM/FliF/Daala/CineForm). It hasn't control over the size of the file. MOV container is probably 4K H264. So in this case I would use HEVC.

He wants a background video for a website (which is in itself rather questionable). No common browser can handle HEVC or Daala.

[aedipuss]

really? you call yourself a web designer and think a 1gb background file is ok??? you're nuts. do you have any idea how many mobile users with data plans would want to kill you? not to mention it would be the slowest loading web page in the history of the web.

[Cornucopia]

Change it to an animated GIF, or APNG (if supported by audience), with a few seconds loop. Small = quick loading.
There is "pleasing the clients" and there is "pleasing the clients of the clients". Explain the big picture to them - maybe they will be ok with that.

Scott

[Jamaika]

He wants a background video for a website (which is in itself rather questionable). No common browser can handle HEVC or Daala.

The truth isn't a web designer. However I am tempted advertising for file handling HEVC browsers Google.
https://chrome.google.com/webstore/detail/h265-hevc-player/dambgipgbnhmnkdolkljibpcbocimnpd
https://forum.videohelp.com/threads/363982-HTML5-web-video-with-HEVC-IS-it-possible-wit...proper-browser

[mulvya]

The OP is looking for a background video, so something supported by HTML5 video tag on most systems. HEVC is not on that roster yet.

[TreeTops]

GIF is preferred for what the OP wants. Just look at whats being used for news sites. On my Android device, most news vids are actually GIFS. All browsers should display GIFS.

[sneaker]

Change it to an animated GIF, or APNG (if supported by audience), with a few seconds loop. Small = quick loading.

Since when are GIFs small? H.264 and VP8/VP9 are much more efficient.

GIF is preferred for what the OP wants. Just look at whats being used for news sites. On my Android device, most news vids are actually GIFS. All browsers should display GIFS.

I doubt that. Example?

[KarMa]

In recent years GIF has fallen a bit out of favor on image boards like 4chan or imgur, instead pushing VP8 inside a webm (I've seen imgur sometimes use x264 in MP4). While not as good and popular as H.264, it's free and very well supported, and worlds better than anything a GIF can put out. There are even entire websites built around converting GIF to VP8(inside WebM). http://gfycat.com/

H.264 would be the better option as it compresses much better, I just don't understand why these sites don't seem to want to deal with it. Guess it has something to do with patents. Something VP8 does not have to worry about.

[Sphere_Nine]

Thanks to everyone who provided feedback. It sounds like the best way to go here is to to reduce the dimensions and length of the video, then convert it to a GIF. As I mentioned, I've never worked with video before, but I'm pretty sure I can do the first two with Windows Movie Maker. Any recommendations on the best way to go about this, or best tools to use?

I also forgot to mention that the theme we're using automatically replaces the video with an image on mobile and tablet, so this is only relevant to desktop/laptop.

[aedipuss]

the same way most web images are created. photoshop. it can create animated gifs also if you didn't know.

1. In Photoshop, select File > Import > Video Frames to Layers…
2. In the dialog that pops up, use the left and right handles to trim the clip down to the exact frames you want to import.
3. (Optional) Use the text tool or filters to edit and modify the frames as you see fit.
4. To export the GIF, select File > Save for Web…
5. Here, you'll have a lot of options you can tweak. The primary change you should make is changing the first drop down box beneath "GIF" to "Adaptive" if it's not already. Otherwise, tweak as you see fit, but the default options should be good.
6. At the bottom, under "Looping Options" ensure that "Forever" is selected, because anything else is wrong.
7. Click "Save..." to give it a name and place it somewhere.

[Cornucopia]

In recent years GIF has fallen a bit out of favor on image boards like 4chan or imgur, instead pushing VP8 inside a webm (I've seen imgur sometimes use x264 in MP4). While not as good and popular as H.264, it's free and very well supported, and worlds better than anything a GIF can put out. There are even entire websites built around converting GIF to VP8(inside WebM). http://gfycat.com/

H.264 would be the better option as it compresses much better, I just don't understand why these sites don't seem to want to deal with it. Guess it has something to do with patents. Something VP8 does not have to worry about.

I would have recommended this also, but the OP wouldn't have come to us with a problem if it had already been like the clip he references (which is h264/mp4 640x360 just a few seconds looping and is ~5MB). But he's got something that is 1GB (200x the size)! So something's gotta give, yet the OP mentioned that they didn't want to lose resolution. Maybe the 1GB file is uncompressed/losslessly compressed (in which case he can use h264 and probably achieve the size goal without too much quality loss), but maybe not.

I would: use MediaInfo on the 1GB clip and see what can be done.

Scott

[Sphere_Nine]

Thanks aedipuss and Scott! I'll have a look at both of these options and see what works best.

Cheers,
Sam

[KarMa]

I'm thinking we wouldn't want to go any smaller than the HD file (1920 x 1080), which I'm guessing will be around 1GB.

I would have recommended this also, but the OP wouldn't have come to us with a problem if it had already been like the clip he references (which is h264/mp4 640x360 just a few seconds looping and is ~5MB). But he's got something that is 1GB (200x the size)! So something's gotta give, yet the OP mentioned that they didn't want to lose resolution. Maybe the 1GB file is uncompressed/losslessly compressed (in which case he can use h264 and probably achieve the size goal without too much quality loss), but maybe not.

I would: use MediaInfo on the 1GB clip and see what can be done.

Scott

OP is only guessing when talking about a 1GB 1080p video. This guess is based on the 4K video OP downloaded from iStock, which is a 4335.31 MB - 30 second - 4K video. I'm not sure what codec is in the .MOV but it's obviously lossless or damnear™ lossless. So this 1GB guess is not to be taken seriously, unless OP wants a lossless 4:4:4 splash page.

I would think a bitrate of 10,000kbps would be enough for VP8 to give nice 1080p results, and for 30 seconds that would come to ~36MB. If it's not go to 15,000 or 20,000. I really don't know the proper bitrate as it's a matter of how low you are willing to go before the quality is too low, and every video requires different bitrates for a certain level of quality.

[KarMa]

On my Android device, most news vids are actually GIFS.

No, just no. MJPEG would even be better at streaming video than GIF. If they really are streaming vids with GIF, they need to be fired.

[TreeTops]

Here's an example of a GIF used by a news source. It is 938gb.

http://www.huffingtonpost.com/entry/us-bans-hoverboard-imports_us_56e9c5c3e4b0b25c91845854

[Cornucopia]

@KarMa, 36MB is a bit ridiculous for a homepage background. Nobody wants to wait like that for the whole page to load.

@TreeTops, I DL'd the gif. It's 778kilobytes, not 938 gigabytes! Bit of a difference. Plus, I could easily have done immensely better with the dither/coloring.

Scott

[TreeTops]

Whoops I meant 938 kb. Big difference. I did the GIF save as and came up with my total. But it does look like GIF's, if optimized, could be smaller than some of the other types mentioned in above posts.

[sneaker]

But it does look like GIF's, if optimized, could be smaller than some of the other types mentioned in above posts.

No. GIF sucks compared to H.264 and VP8/VP9 when it comes to actual videos.

[KarMa]

@KarMa, 36MB is a bit ridiculous for a homepage background. Nobody wants to wait like that for the whole page to load.

What do you think the size of a 30 secod GIF at 1080p would be, at comparably quality? I would gander 100/200MB or more.

If he does not like 36MB he could drop the resolution or drop the bitrate for worse quality. Maybe even move on to x264 for better compression.

Here's an example of a GIF used by a news source. It is 938gb.

http://www.huffingtonpost.com/entry/us-bans-hoverboard-imports_us_56e9c5c3e4b0b25c91845854

PAUL BLART ANIMATED GIF

Dimensions: 480x270
Size: 937KB
Frames: 34

Then theres that hooverboard video.

BUSTLE ANIMATED GIF

Dimensions: 640x360
Size: 9403KB
Frames: 71

[mulvya]

Lots of sites have background or banner videos. I've never seen a GIF used till date. MP4/WebM/OgV is it.