The Official Blog of Patcoola

Im just a dude watching over my parents,
and trying to make cartoons and video games from home.

Video Compression for the Web

, By Patcoola

Learn about video compression best practices for hosting your videos on your website. Bit Rates, Resolution, Frame Rates and Buffering.


It’s all about the Bit Rate

Bit Rate is the amount of data per second of video, it also determines the image and audio quality and buffering. Although, we think of video as frames flipping quickly to display moving pictures, digital videos are not the same, in fact digital video is not actually a series of images instead it is a series of images overlapping on each on to reduce redundancy and reconstructed to display as series of images making a video. Complicated, yes it is but understanding Bit Rate makes it simple. Instead of 23 images making one second of video with only have to deal with one second of data divided by 23.

Video Bit Rate is made up by two Bit Rates: Audio and Video. (256 kbps + 64 kbps = 320 kbps) The total Bit Rate makes the video. 320 kbps times 60 seconds equals 2.34 Mega Bytes (MBs) of data, this means to watch one minute of video we have to download 2.34 MBs faster than 60 seconds.

The Bit Rate for one second of video is divided by the frame per second (FPS) of the video footage, a higher Bit Rate will make a better quality image. Most video is between 23 and 30 FPS, but we can lower the amount of frames thus improving the image quality, 15 FPS is good for the Internet.

Bit Rate is the data per second of video, it also determines the quality and how fast the Internet has to be to stream the video for both the Website and the User.

Calculating the Video size, we can use this [calculator] to determine the size of the video before we compress or upload the video to the Internet. See [Calculator].

Video Resolution

The video’s display size can be difficult when dealing with aspect ratios.
Here is a list of recommended video resolutions. (Width x Height)

Full Screen 4:3

320 x 240
640 x 480
720 x 540

Wide Screen 16:9

426 x 240
640 x 360
854 x 480
1280 x 720
1920 x 1080

Note: Wide Screen resolutions below 1280 x 720 are often mistaken by video players for Full Screen, in this event the wide screen video will be squished down to a square. To avoid this ensure your video encoding software can strict aspect ratios.

Calculating the resolution, use this [calculator] to calculate a custom resolution. See [Calculator].

Video Formats

All video has to be encoded in two formats:


These are called containers, with in this container is a video and audio codec, the best codec to use is H.264 for video and AAC for audio.

Video Codec: H.264
Audio Codec: AAC

Best Encoding

A free program for Windows I recommend is XMedia Recode from
The best and fastest encoding I recommend is using Average Bit Rate instead of 2-Pass or Constant, Average Bit Rate is a variable encoding dynamically increasing or decreasing the Bit Rate to improve image quality and maximize data size. Average Bit Rate encoding also provides excellent image quality and processing speed.
When encoding your video for online viewing we want to use the lowest Bit Rate while maintaining a decent image quality, if the Bit Rate is too high we will need to very fast Internet connects and that increasing Buffering, we can avoid Buffering by using lower Bit Rates.

Recommended Encoding Settings

Full Screen 4:3

320 x 240, FPS 15, Video Bit Rate 384 kbps, Audio 32 kbps Mono 32000 khz
640 x 480, FPS 15, Video Bit Rate 512 kbps, Audio 32 kbps Mono 32000 khz
720 x 540, FPS 15, Video Bit Rate 896 kbps, Audio 56 kbps Stereo 44100 khz

Wide Screen 16:9

426 x 240, FPS 15, Video Bit Rate 384 kbps, Audio 32 kbps Mono 32000 khz
640 x 360, FPS 15, Video Bit Rate 512 kbps, Audio 32 kbps Mono 32000 khz
854 x 480, FPS 15, Video Bit Rate 896 kbps, Audio 56 kbps Stereo 44100 khz
1280 x 720, FPS 15, Video Bit Rate 1152 kbps, Audio 56 kbps Stereo 44100 khz
1920 x 1080, FPS 15, Video Bit Rate 1664 kbps, Audio 56 kbps Stereo 44100 khz

Useful Tools

[Software] XMedia Recode
[Web App] Video Resolution Calculator
[Web App] Video File Size Calculator
[Web App] Download/Upload Time Calculator




Post Meta

Share Post


Comments: 1, Write Comment

  1. I fully agree your idea.Thanks for sharing…


Comments Pages: 1 of 1


Leave a Comment

All comments are reviewed before publishing. Comments must be related to the page topic, must not be spam, and must comply with the criminal code of Canada.


Matched Content