Now that you have a working knowledge of frame rate, we are going to discuss frame size, and why that matters.
The first thing you will notice about any web video, is they tend to be tiny. This is because the size of the video is directly related to how big the data stream will be, and it isn’t as straight forward as you might imagine.
Video windows are always rectangles.Â It is impossible to make them any other shape. Because of this standard, it is fairly easy to determine the amount of data the stream will take, based on the number of pixels in the video window area and the frame rate.
Remember how to determine the area of a rectangle from high school math? Length times width equals area. Video area is the same only we use height instead of length. Width is measured on the x axis, 0 is on the left side counting up as you go right. Height is measured on the y axis counting up as you go down. It is different than standard math graphing where 0 is on the bottom. (The reason for this is the way old picture tubes scanned the image) Here 0, 0 is the top left.
Area is a simple calculation width (320) times height (240) = 76,800 pixels.
Â Color Depth
One other thing you need to consider is how much color information we actually want to store. Color depth is measured in multiples of 8bits (one byte). Determining color depth is beyond the scope of this article. For now, just know that it exists, and the higher the number the more colors you can reproduce. In this image, I am using the modern standard 24bit color depth. I will talk more about color depth in the next post in this series.
Each pixel counts
We can now calculate the exact size of our data frame. (300 width x 240 height) x 24 bits each pixel.
This image will take 1,843,648 bits to store uncompressed.Â That is 1.8 megabit, or faster than a T1 can download in a second. In other words WAY to much data at 30 frames per second for anyone’s internet connection. That is why we use compression. We will talk about various methods of compression in coming posts.
Â Video sizes
I am spending a lot of time on this section, because it is vitally important and a common overlooked point.
Video compressors are usually picky about the size you choose. Most of them require that the width and height numbers be even. Some limit you even farther making the sizes only divisible evenly by 4. Standard sizes, like 320×240 tend to compress better than awkward sizes like 800×200. TheÂ ratio of width to height is known as the aspect ratio. Some compressors will not let you do such an extreme aspect ratio, though this is a less common problem than we saw a few years ago.
Here is an example of why video sizes are so important to consider.
In our original example we had 320×240 or 76,800 pixels. Let’s imagine that we want a bigger video so that detail can be made out more clearly, say 480×360. This is a drastic size increase, though intuitively, it does not seem like a big change. 480 doesn’t seem to be that much bigger than 320. It is however an astronomical increase in surface area. 480×360 = 172,800 pixels. Over 2 times the size. I have depicted the two sizes overlaid below.
You can see the original space is much smaller than just the additional area. The new image would take 4147200 bytes to store uncompressed. 4.1 megabits is more data than most high end DSL and cable packages can handle in a second. Again, we use compression to whittle that number down, but size does matter.
Bigger is better
As a general rule, I would say most people think bigger is better. This is visually evident by the recent push to sell larger and larger displays. With pixels, I would agree. But having more pixels doesn’t necessarily mean that the video will look better.Â With web video, we are looking to hit a target bandwidth, like 300k. That means we must make some decisions between size and frame rate for our needs. The bigger the frame, the more bandwidth it will take to send each frame. The faster the frame rate the more bandwidth it will take each second to send the frames. Compressing great looking web video is a constant juggling act of these variables each with their own advantages. The faster the images appear, the smoother the motion. The larger the image size, the more detail can been seen.
In the next post I will discuss color depth in detail and how it affects image quality.