The Video Animal’s Cave

In part one we took a look at the first step to post decent quality video to sites such as YouTube, by using a filter to ‘de-interlace’ the footage in order to make the video itself web ready. Today we are going to look at compressing that file to make it small enough to be accepted, and still big enough so that it doesn’t look ugly.

To do that, we will start by figuring out how compression works and then some basic tips and tricks to making compression work for you, instead of against you.

What is compression?

Compression is just what it sounds like. It is taking something large and squeezing it down to make it smaller. When it comes to all things on your computer, compression is a standard way for the computer to take what could be a huge file and make it manageable.

How does compression work?

Compression isn’t a new thing, in fact it has been around since the early days of computing, in forms you might recognize such as ‘winzip’. Understanding how basic computer compression works is pretty easy.

Imagine for a second that data on your computer is like a string of yarn. If you took all the yarn you needed to knit a sweater and laid it all out on the ground it would probably fill the floors of your house. So you perform a type of compression, you ball it all up. You do it in a nice neat way because if you just grabbed it all and stuffed it in a bag it would get all tangled. So instead you slowly ravel it in to a ball so you can get to it as you need it. We do the same thing with data, we roll it in to a neat ball on the hard drive so that it doesn’t get tangled up. The computer does it in such a way that the data flows smoothly, because if we hit to much data at once (like a knot in the yarn) the computer slows down do unravel it all and we get loading or freezing on our computer.

Back to the ball of yarn. If you took that ball and squeezed all the air out of it it would get smaller. You would have ‘compressed it’ If you could keep it that way you could store a lot more balls in a much smaller drawer. This is exactly how digital compression works. It takes all the extra spaces and repeated bits out of a file and replaces it with smaller bits of code so that it can be stored in a smaller space. To do this it uses something called a ‘codec’

Ok, I get it, now what the heck is a codec?

Unlike the ball of yarn you can’t just take all the air out of a bunch of data. It would get messy and unreadable pretty quick. You CAN take out some erroneous and repeated data and replace it with smaller bits. Imagine every space in this paragraph actually takes about 10 bits in the data world. To us it is a space but to a computer it is 001011001. (i made that up.. don’t quote me) If we could replace this data with one simple mark like lets say ‘-’ it would take up less space. The problem is that you need to be able to ‘de-code’ that new mark and tell the computer “Whenever I say ‘-’ I really mean 001011001…ok?” That’s what a codec does. It ‘encrypts’ the extra data, and then uses a special ‘de-coder ring’ do decrypt it in the original larger format so the computer can read it.

So what does that have to do with video?

Digital compression really hit its stride when it left the world of compressing boring old computer files and started dealing with things like music. Back in the 80’s someone had the wild idea that we could take the same idea and apply it to sound. Instead of giving the computer every tiny bit of sound data and getting the computer to reproduce that sound, we could simply use a codec. Boom… we are able to store that data on small disks.. and the CD is born. Eventually we got much better codecs, and now we can store hundreds of songs on a cd using .mp3… all .mp3 is.. is a better codec that is better at compressing the audio data.

However, video was a conundrum. Video is much harder than audio in the grand scheme of things. With video you need to have color information for every pixel on the screen… how do you compress that without seriously altering the image? At first even short videos took up huge chunks of space on hard drives, it seemed like it would never really work.

It must have taken a dreamer to come up with the solution, because the solution lay in the sky. When you film the sky it stays a nice even blue, and if you have a steady hand, it will stay on the screen for a long time, in the same place. AHAA!!
What if instead of saying to the pixel ‘i need the color blue’ 30 times every second, we said ‘i need the color blue here for the next 800 frames’? If we could do that we could save a lot of space! Bammo! Video codec was born. The first place consumers really saw codecs at work was on DVD’s. DVD’s use an older codec called MPEG-2. Since then the codecs keep getting better, and now we have codecs that can do HD video on the same size of disk.

It took a long time to get right, and has really only become a viable technology in the last 10 or so years. But when we did get it right it revolutionized everything! When video and computers learned to play together nicely it opened up a new age of digital video and effects work, and suddenly directors could make movies like ‘300′ and ‘Titanic’… but thats another story.

Ok…so what does it all mean to me?

Understand codecs and you understand how to get good quality video on the web. Codecs are always improving and are not created equal. Old codecs do substandard jobs and eventually become defunct. Some codecs improve constantly but not all computers will have access to them. You need to strike a balance between quality and availability. Find a codec that does a good job but that everyone can see on their screen. The problem is that there are a lot of codecs out there.

Apple owns and supports a program called ‘Quicktime’ that has been around a long time. Quicktime is a piece of software that can read and compress using several codecs. It is the standard in the video industry. You can spot a quicktime file when it has the tag ‘.mov’ at the end of it such as ‘mymovie.mov’. Microsoft has their own program ‘.wmv’ and flash has one too… ‘.flv’ (often called a ‘flash video file) The secret behind why these programs survive while others die is actually because they are a combination of codecs all contained within a singe reader. A ‘quicktime’ player can read 20 or so codecs that all have that same ‘.mov’ tag. Whenever a new codec is developed by the folks at apple (or they buy someone else’s work) they add it to their codec ‘reader’. Think of it like a family. Different people, but all with the same last name. The actual ‘codec’ it is using could be called something like ‘h.264′or ‘mpeg2′, but to make it easy for the consumer they lumped it in to ‘.mov’ so that you only need to download one piece of software to read it.

I get it, geeze, get on to explaining how it works!

So you made your video of your ‘gnarly whitewater run’ and you want to post it for the world to see. You de-interlaced it because some goober on the internet told you to, and now you are ready to kick it out of your editing software and post it. So you click on ‘export’ and you give it a name and there it is on your desktop.. but holy crap!!! the file is 5 gigs! You take a deep breath and wade in to the ‘advanced settings’ tab of your video editing software and you are confronted with all kinds of options… you click on ‘video for web’ and it exports to your desktop.. phew! the file is only 10 kilobytes! You click on it to watch it and… what the hell??? The video is the size of a thumb and so blurry you can’t see your gnarly whitewater run any more!!

Don’t panic. You understand the basics of compression and can now start to make compression work for you!

Step 1: Before you do anything you need to find out what formats are supported by the site you plan to use. YouTube currently supports WMV, .AVI, .MOV, and .MPG formats.

Step 2: Find out what the biggest file possible is. In the case of you tube that is currently 1024 mb and can be a maximum of 10 minutes in length.

Step 3: Leave the relative comfort of presets and venture in to the world of advanced compression!

I’m ready! … wait a second … what the hell are all these settings… help!!!

I am going to assume you are using Final Cut. (Sorry folks with premier, Don’t worry, a lot of this stuff will work the same fundamental way)

If you are using a basic editing program such as iMovie or windows movie maker, you won’t have as many options. The solution is to export it in all the different formats that the program will allow. Take a look at the size of the file, watch the movie and see how the quality is, and upload the one that has the right codec type, the best quality and is under your ‘file size limit’. (delete the ones you aren’t using because you can fill up a hard drive quickly)

If you are using Final Cut or a similar program it is time to open up the advanced settings for exporting your file. In the case of Final Cut.. it’s time to open up (duhn duhn duhn) “Compressor”. (File>Export>Export using Compressor)

The advantage to compressor is that you can preview the size of the file you are going to get after you export. This is super handy as it will let you play with the settings until you can get under the ‘maximum file size’ limit, while allowing you to play with the frame size and quality of your video. It even allows you to preview what the video will look like after compression, so you don’t get a nasty surprise after you have let it work at a file for 5 hours.

How do I make the file smaller?

There are a few different settings you can play with that will quickly make the file size smaller.

1. Frame size- If the video takes up less space on the screen, the file will have to deal with less pixels.. less pixels, smaller file size
2. Quality- This is sort of a ‘catch all’ setting. The lower the quality of the image, the more compression you are allowing the codec to do. Heavy compression will give you smaller files, but you may not be as impressed with the result
3. Bit Rate- We’ll talk about this more in a second, but lower the bit rate and you lower the file size.. and also,again, the quality.
4. Codec- some codecs will produce smaller files. In this case I generally recommend sticking with .mov and using the h.264 codec, unless your posting site doesn’t support .mov files.. which is pretty unlikely, but does happen.

I can’t say.. just hit these three buttons and you will get perfect quality video ready for the web. You need to play with these settings, get to know them and alter them depending on the video. Slowly striking a balance between file size and image quality. I can tell you that the ‘web streaming’ options give you decent quality video, makes sure that the video doesn’t stutter too much and will resize it nicely.

To see how the video is affected by your choices, click on the ’summary’ option in the inspector while you have the setting highlighted in the ‘Batch’ window. You can see that is shows the ‘estimated file size.’ Now all you have to do is play with the settings until you can get the file size small enough, while still being comfortable with the quality of the image!

The real key to playing with compression is playing with the ‘data rate’. Remember our ball of yarn? The data rate is the rate that the yarn is fed to the net. (or in this case..data) Imagine the internet is a series of tubes.. oh crap.. I can’t believe I just said that… I mean…

Imagine the amount of data that you can get from the internet at any one time is like a pipeline to your computer. The pipe has a diameter and can only feed so much data to the computer at any one time. Let’s say your computer has a data rate of 1000 kilobytes per second. If we try to feed more than that at any one time the pipe gets clogged up for a bit… and the video will freeze up as the computer tries to sort out the data and get the next chunk it needs. If we make sure that the video never exceeds this 1000kb/second, the video will always play smoothly! Your compressor is capable of making sure that the video is compressed enough to always do that!

The second advantage is that if you play with the data rate it will severely increase or decrease the size of the file after compression! The lower the data rate.. the smaller the file. As always, this will be at the cost of image quality. The higher the data rate.. the higher the quality of your video!

Anyway, thats it for this week. I think I have left you with more than enough to work on. I hope to have time to fiddle a bit with ‘Premier’ and be able to add a part two to this post for those of you without Final cut. All in all I am sure many of the concepts are the same and it will be up to you to fiddle with the settings.

Good Luck!

Next week we will discuss frame size in more detail, a brief word on pixelation and finally, look at how to add letter boxing to your video!

Until then, feedback is always appreciated. If anyone out there is a Premier guru and can give some options for web video, pass it on!

The Animal

A huge amount of the video produced nowadays is going to be posted to the net. Video sharing services like YouTube make it simple and free to get video out to the world and on to your webpage. It’s pretty easy to do it well and make it look good if you know what you are doing.

So, you edited a 10 minute clip to advertise your up and coming film and you want to post it to the net. If you try to post the highest quality version you will find that most video posting sites will bounce it back at you because it is simply too large. You would think fixing the problem would be as easy as doing an output in a lower quality, and, that will work.. however, there are a few tricks to doing it so that your video is small enough to post, AND, still looks good.

To help out we will be doing a three part article on understanding the basics of how web ready video works. Starting this week with an article on ‘Interlace vs. progressive’ Video, and followed by a look at compressiona and we will wrap it all up in a couple of weeks with an article on pixels and size issues.. including how to letterbox your video.

Interlacing? What is it… and for that matter.. what the heck is ‘progessive scan’??

Before you output your video (using quicktime or compressor or whatever software you use to make the file) there is a simple step that will solve a whole heck of a lot of problems. You need to ‘De-interlace’.

We can go in to a lot of detail here, and there are huge primers out there that help explain this in detailed technical terms for you… but lets try to explain this whole ‘interlacing’ debaucle simply.

TV screens (traditionally) work different than computer monitors. TV screens use a system called ‘Interlacing’. Simply, interlacing uses two lights to scan an image on to a screen, and before it is finished scanning the first image, the second ‘light gun’ starts on the next image in the series, and before that second ‘gun’ is finished it’s job, the first ‘gun’ starts on the next image.. and so on and so on. By weaving (or ‘interlacing’)those two images together TV’s can scan up to 29.97 images on the screen per second giving the illusion of motion. This is all due to that ability to ‘interlace’ (or at least it was until the technology changed in the last 20 years). Film accomplishes the same feat by flicking 24 full screen images per second on the screen. 24 frames per second (or FPS in film terms) is pretty much the minimum required to fool the human eye in to seeing things move. Although interlacing allows us to put more images up on the screen in a second, film is more ‘true’ to nature, and in the process of interlacing we take away the clarity of the image by spacing it out with the next image in the series. Televisions work like a printer, printing one line at a time, and there are only so many lines it can put on a screen, when we interlace it we use half those lines for one image, and half for the next… if we could use all the lines everything would be higher definition.

A computer monitor on the other hand , doesn’t use interlacing. When computers where developed the technology had improved and the computer didn’t need to show that many images a second. Computers used a different type of technology called ‘progressive scan’. In this case, it worked more like a film, it put up a new image as it was needed, at a maximum speed of about 30 fps. Once again, we can go in to a lot of detail here, but this simple explanation will do what is required.

That technology was slowly improved upon over the years and as it got better we could squish more and more lines on the screen and more and more colors, eventually the ‘progressive scan’ computer monitor could show television images. Eventually video could be shown on a computer monitor the same as film.. and now we have cameras that can shoot in progressive scan. However… the problem is that most video technology, hasn’t caught up, and we are left with some of the relics of the TV age. On top of that, HD video also uses interlacing, so that it can show 60 images per second, giving HD superior image quality. Now we have a huge variety of camcorders and screens that all use different image standards… NTSC video is shown at 29.97 fps interlaced, HD video can be shown at 30 fps progressive (30p) or at 60 fps interlaced (60i) or even at 60 fps progressive (the holier than though 60p!). When you shop for televisions they will tell you how many lines of resolution (the printer analogy again here.. think of it as light guns printing on the screen) and whether it is a progressive or interlaced device. Confused yet?? Ignore that for now, all you need to know is that most video, including your HD video is shot interlaced. If it isn’t, you have probably already done the research or read one of my other articles on progressive scan HD camcorders.

Note: There is an ongoing debate whether 30p (30 fps progressive scan) image quality is better than 60i (60 fps interlaced) and I will leave that up to you. (although personally I find 30p looks nicer on screen… more like film)

Great.. now what does all this have to do with YouTube?

You will notice the difference if you throw a dvd in to your computer and watch it on your computer monitor, it will look like little lines appear whenever someone on screen moves too quickly. We call all these extra lines and any glitches left behind ‘artfacts’. These particular artifacts are because the computer is showing two interlaced images at a time on a progressive computer screen. The computer screen was never designed to handle it and just shows both images at once! It is tolerable when watching a dvd on a plane, but you run in to issues when you pass interlaced footage on to YouTube to post for you… or take this image and try to compress it down in to a smaller frame or file size.

We will talk about compression types in more detail in the next article, but for now all you need to know is that when you compress an image that already has extra, unneeded lines of screen junk.. such as those artifacts left over from the interlaced image, the compression gets worse… it has to deal with the artifacts and it usually does it badly.

So how do we fix it?

The best way is to use a ‘de-interlace’ filter. Every decent editing program has one. In Final Cut you will find it under ‘Video Filters-Image Control’ and you should definatly keep it in your favorites box if you plan on doin a lot of video for the web. I would be hard pressed to imagine that any other decent video editing software wouldn’t contain the same sort of filter. It may take a bit of hunting, but I assure you.. it is there.

(edit: You will need to pay for a video editing program to do this. iMovie and windows movie maker DO NOT come with this option. However, Final Cut Express or Adobe Premeir Elements will have the filter. You can also find a few free programs out there that will do the trick, but at the cost of quality)

All you do is drag it on to your video clips like any other filter and render. No fuss, no muss. This Filter takes out the extra lines from the image and turns it in to a progressive scan image with a 30fps framerate, just like your computer screen. It literally takes one of the two images on screen and tosses it away. Tada! Now your footage is really at 30fps! Suddenly.. your clip will look that much better… and if your original image is clearer, it will look clearer when you compress it in to a web ready version.

The other option (but not nearly as good) to fix the problem is de-interlace when you compress the video. Most video compression software will have a ‘de-interlace’ option that will do much the same thing as the filter for you. However, for the best results, use the filter in your editing software and then export (compress) the file. The compressor has enough to work on without having to deal with the interlacing, and the filter in your editing software is generally a higher quality.

So remember… rule of thumb. If your video is going to the internet, make it web ready by de-interlacing it. One simple step that makes it all that much clearer.

If you want to learn more about how all this interlacing/progressive/web video stuff works, I recommend starting with Adobe’s video compression primer. I really tried to keep the information simple here, so there is a lot more to it, and I changed a few numbers to make things clearer. If you really want to know how it all works, Read the primer. (Note: As Mr.Hollyn Pointed out in his blog… this primer is pretty dry stuff. Only read it if you really want to know the nitty gritty or have a good nap. W.R.)

Next week we will talk about compression and how it works.

The Animal