Optimising video for web sites & multimedia (June 2009)
Introduction
This article suggests some settings for optimising video for multimedia and website projects. You may wish to read the following articles first ...
Codecs, formats and optimising concepts
When optimising video you must consider 5 primary factors ...
- What media playing software your end-user has installed
- What speed & format optical drive your end-user has
- What speed of internet connection your end-user has
- What codecs do the various media playing software packages contain
- Which codecs offer the best quality / file size relationship for your needs
A word about terminology
Optimising, encoding and compressing mean the same thing in this context, reducing video files sizes down using a codec to make them quicker to send over a network or smaller to fit on a storage device.
Decoding, decompressing, uncompressing mean the same thing, opening files using a codec to replay them.
Choose a program to optimise your video
Such as ...
- Sony Vegas
- Adobe Flash video encoder (bundled with Flash Professional)
- QuickTime Pro
- MediaCoder
- Squeeze for Flash (by Sorenson)
- On2 Flix
- Adobe Premiere
- Apple Final Cut / QuickTime Pro
- Apple Compressor
- Apple QuickTime Pro
- MPEG Streamclip
- DivX
What is a codec?
If you don't know the answer to this question read our article on codecs, formats and optimising concepts now.
The dominant media/video player technologies
Media player comparisons
Media player applications allow computers to replay video, animation and audio in stand alone player applications or by employing a plug-in within a wide range of file formats (web pages, pdf, Director files, Flash files etc).
| Computer media player comparisions | ||||
|---|---|---|---|---|
| QuickTime | Windows Media Player | Flash | DivX | |
| Player utility | Yes | Yes | Yes | Yes |
| Browser plug-in | Yes | Yes | Yes | Yes |
| Installed base | All Macs most PCs | All PCs some Macs | Most Macs & PCs | Some PCs, few Macs |
| x-platform | Yes | Yes | Yes | Yes |
| Choice of codecs | Excellent | Poor | OK | n/a |
| MPEG-1 codec | Yes | Yes | ? | Yes? |
| MPEG-4 format | Yes | Yes | Yes | Yes? |
| Sorenson codec | Yes | ? | Yes | No |
| H.264 codec | Yes | Yes | Yes | No |
| Good for CD/DVDROM? | Yes | OK | Yes | No |
| Good for web? | Yes | Yes | Yes | Yes |
Web video player comparisons
In order to play video, web browsers must employ a player application or browser plug-in. Unlike MP3 audio (which will play in virtually any audio or video playback software), video data must usually be presented in a player application or browser plug-in file format. The following chart presents the current (2008) primary video playback technologies.
| Web site video player comparisions (browser plug-ins) | ||||
|---|---|---|---|---|
| File format | User base | x-platform | Flexibility | Video/audio quality |
| Flash player | Most computers have the Flash player plug-in but not all | Mac and PC | Good quality, Flash has the On2 VP6 and Sorenson Spark codecs but control over compression quality is not the best. You can design your own playback controls or chose from a number of skins. | Good |
| QuickTime | All Macs, majority of PCs | Mac and PC | Good choice of codecs, optimising parameters and file formats. | Excellent |
| Windows Media Player | All PCs, only some Macs | Mac and PC | Poor. You'll reach all PC users but control over optimising quality is poor. | Average |
| Real Video | Declining | Mac and PC | Too expensive and inflexible, perhaps a viable option only for real time server streaming (broadcast). | Average / poor |
| DivX | Some PCs and Macs | Mac and PC | Great quality but inflexible optimising and playback tools. | Very good |
| YouTube | - | Mac and PC | Not strickly a player application format(it uses Flash). Publish once to YouTube then insert code into your web page so the video appears there in the YouTube player. Good but you're stuck with their player/branding. | Has been poor but the new HD (H264) option is good |
Flash video format
Flash video has become the most popular for web based video. Flash video files can be created with the Flash Video Encoder app and either be embedded into or linked to a Flash movie file, or linked directly to a web page with a choice of preset playback control "skins". More on this process is here.
Flash video files can be encoded with the Sorenson Spark or On2 VP6 (an H.264/MP4 codec variant?) video codecs and MP3 audio codec. On2 VP6 is preferably but requires the latest (version 9) plug-in/player. According to Adobe 96% of internet users have at least the Flash 7 plug-in/player installed but this version only handles inferior Sorenson encoded files. As of 2008 only 63% have the Flash 9 plug-in/player which delivers superior video quality. However, the plug-in is a small download so persuading users to upgrade shouldn't be too difficult providing they are not at school or work where they will be unlikely to have administrator access.
QuickTime
QuickTime is a x-platform (Mac & PC) media player and codec application. QuickTime is installed on all Macs, most PCs and is available as a free download. Read more here
QuickTime includes a wide range of the excellent codecs, and arguably provides the most flexible and powerful optimising controls, and has been the web video file format of choice for film and video professionals. Significantly, QuickTime includes the best current audio and video codecs including H.264 (MP4). Once you have used this codec you will become dissatisfied with alternatives! QuickTime is no longer the market leader, having lost market share to the Flash player in recent years.
Windows Media Player
On Macs and PCs, Windows Media Player can play video and audio files created in the proprietary Windows Media Player format as well as some non-media player file formats such as MPEG-1 and MPEG-4. The proprietary file formats utilise a number of video and audio codecs but Microsoft seem a little cagey about exactly what they all are! Find out more here.
Real video
Real video is losing ground in the media player formats war because it offers relatively poor quality and requires special and expensive server software.
DivX
The DivX video format is good. There are excellent free Mac & PC player and conversion/encoder programs. The problem is, although its basically another file wrapper for an a number of codecs (one of which is an MPEG4 variant), it's another non-standard format
YouTube
Although the YouTube player is not strictly another player format (it uses Flash), it has become so popular that it presents a very effective and easy way of being able to publish to one location (YouTube.com), but present in many other locations, by pasting the YouTube link/player code into your web pages. Recently YouTube has been re optimising all the "raw" uploaded video stored on its servers to HD (probably Flash/On2 VP6 format) so users can choose the best quality for their connection.
Our advice (Oct 2008) for publishing fully compatible x-platform video
You will need to compress your video and audio using codecs that your end-user system has installed or you will need to persuade them to install the required codecs to watch your video. But remember, end-users at college, school or work may not have access privileges to allow them to download and install new player/plug-in versions.
Our top recommendations ...
1. Flash video, for 85% (approx) compatibility with all recent Macs and PCs
Encode and publish Flash video using the On2 VP6 and MP3 codecs. Advice on suitable settings is given below.
2. YouTube, easiest option
Upload "raw" video files (DV?) to YouTube, where your video will be optimised and published. Using the code the sites supply, you can re-publish/link/embed to your own web pages. You have less control over quality.
3. QuickTime & WMV, for 100% end-user compatibility
All Macs have QuickTime and all PCs have Windows Media player, therefore if you provide versions in both formats you will reach the widest audience ...
For the Mac
If you think your end-users will have QuickTime 7 or greater, we think that you should create QuickTime video files (.mov) encoded with the MPG4/ H264 codec. Use the IMA, Qualcomm PureVoice or QDesign Music 2 codecs for the audio soundtrack. QuickTime has all these codecs. Detailed suggested settings are elsewhere on this page.
For Windows
Compress video in a Windows Media Player friendly format. Last time we looked, Microsoft wasn't very open about what codecs it contains, so you'll either need to visit their support site for advice, and/or use their encoder to encode files.
1. Optimising video in the Flash video format
There are 2 primary ways for adding Flash video to youir site ...
- Encode your "raw" video (DV?) into the Flash video format and link it to or embed it in a Flash movie, in which you can create a bespoke skin, and playback controls with ActionScript.
- Import you "raw" finished video edit (DV?) into Flash Video Encoder, optimise it (suggested settings are below), then "insert" the exported file into a web page and chose a skin and some playback parameters for it. Advice is here.
Flash codecs
The Flash plug-in/players can replay 3 formats (codecs) of video file ...
- Sorenson Spark (Flash player versions 7-9)
- One2 VP6 (Flash player versions 7-9)
- H264 (Flash player version 9 with update 3 applied)
Although H264 is the superior codec, the latest Flash player version is required, and not as many end-users will have it as versions capable of replaying Sorenson Spark (as of May 2008).
Encoding Flash video
You can use a number of encoders to create video ready to import into Flash ...
- Adobe Flash video encoder (bundled with Flash Professional)
- QuickTime Pro
- Squeeze for Flash (by Sorenson)
- On2 Flix
The following table shows our recommended settings.
| Flash video settings for broadband | ||
|---|---|---|
| Value | Comments | |
| Frame size / aspect ratio | SD (4:3) 640 x 480 SD (16:9) - 640 x 352 |
For SD 16:9 DV, you MUST convert your video from 4:3/16:9 anamorphic to the actual physical DV 16:9 pixel aspect ratio. |
| Frame rate | 12-15 fps | |
| Deinterlace? | Yes | |
| Video codec settings | ||
| Codec | Sorenson Spark for best compatibility, On2 VP6 for newest computers and Flash plug-in versions | |
| Quality | High | |
| Keyframe | Automatic | |
| Data rate | 400Kbps (for base level for 512Kbps broadband), 700 Kbps (for 1Mbps broadband) | |
| ... additional optional settings | ||
| Crop border | For DV, approx 7 pixels left and right, 5 pixels top and bottom | |
| Audio codec settings | ||
| Compression | MP3 | |
| Sample rate | 44.1KHz | |
| Bit rate | 128 Kbps (music), 64-128Kbps (speech) | |
| Channels | Stereo (music), Mono (speech) | |
2. Optimising video for upload to YouTube
YouTube has its own help page but it doesn't give advice on SD 16:9 anamorphic (DV). Use the advice below ...
| Video for YouTube | ||
|---|---|---|
| Value | Comments | |
| Frame size / aspect ratio | SD (4:3) - either 720 x 480, 720 x 576 or 640 x 480 SD (16:9) - 640 x 352 HD (16:9) - 1280 x 720 (720p) |
For SD 16:9 DV, you MUST first convert your video from 4:3/16:9 anamorphic to the actual physical DV 16:9 pixel aspect ratio. |
| Frame rate | Leave unaltered | Let YouTube handle this |
| Deinterlace? | Yes | |
| Video codec settings | ||
| Codec | DV or H.264 (an MPEG4 codec) | Leave in the camcorders native file format if possible (eg DV), unless the size is too great, then encode in H.264. YouTube will re-encode the video so its best to avoid compressing it yourself first. |
| Quality | High | |
| Keyframe | Automatic | |
| Data rate | Automatic | |
| ... additional optional settings (for Cleaner etc) | ||
| Crop border | For DV, approx 7 pixels left and right, 5 pixels top and bottom | |
| Resize after crop | Use 'Better Resize' (Accurate) | |
| Deinterlace | Yes | |
| Noise | Mild blur (optional) | |
| Audio codec settings | ||
| Compression | Unaltered | If you have to compress because of size problems, use the best quality you can. Keep above 196Kbps. |
| Sample rate | 44.1KHz | |
| Bit depth | 16-bit | |
| Channels | Stereo (music), Mono (speech) | |
3. Optimising video in the QuickTime format
Here are some suggested settings that have worked for us ...
| QuickTime for 2Mbps broadband or better | ||
|---|---|---|
| Value | Comments | |
| Frame size / aspect ratio | 480 x 384 (4:3) |
Experiment with bigger sizes but test the result before publishing. |
| Frame rate | 15 fps | |
| Deinterlace? | Yes | |
| Video codec settings | ||
| Codec | H.264 (an MPEG4 codec) | |
| Quality | High | |
| Keyframe | Automatic | |
| Data rate | Automatic | |
| ... additional optional settings (for Cleaner) | ||
| Crop border | approx 7 pixels left and right, 5 pixels top and bottom | |
| Resize after crop | use 'Better Resize' (Accurate) | |
| Deinterlace | Yes | |
| Noise | Mild blur (optional) | |
| Audio codec settings | ||
| Compression | Apple lossless (music), Apple lossless (speech) | |
| Sample rate | 44.1KHz | |
| Bit depth | 16-bit | |
| Channels | Stereo (music), Mono (speech) | |
| Flatten file? | ||
| PC only | Yes | |
| Mac & PC | Yes | |
| Mac only | No | |
| QuickTime for 512Kbps broadband | ||
|---|---|---|
| Value | Comments | |
| Frame size / aspect ratio | 320 x 240 (4:3) |
Experiment with bigger sizes but test the result before publishing. |
| Frame rate | 12 fps | |
| Video codec settings | ||
| Codec | H.264 (an MPEG4 codec) | |
| Quality | Medium | |
| Keyframe | Frame rate x 10 (every 120 frames) | |
| Data rate | 66 kbytes / sec approx | |
| Fast start streaming | On | |
| Compressed header | On | |
| Audio codec settings | ||
| Compression | Apple lossless (music), Apple lossless (speech) | |
| Sample rate | 44.1KHz (music), 2205KHz (speech) | |
| Bit depth | 16-bit | |
| Channels | Stereo (music), Mono (speech) | |
| Flatten file? | ||
| PC only | Yes | |
| Mac & PC | Yes | |
| Mac only | No | |
| QuickTime for CD/DVD ROM | ||
|---|---|---|
| Value | Comments | |
| Frame size / aspect ratio | 480 x 384 (4:3) |
Experiment with bigger sizes but test the result before publishing. |
| Frame rate | 25 fps | |
| Video codec settings | ||
| Codec | H.264 | |
| Quality | High | |
| Keyframe | Frame rate x 10 (every 250 frames) | |
| Data rate | (limit to) 270 kBps | |
| ... additional optional settings (for Cleaner) | ||
| Crop border | Approx 7 pixels left and right, 5 pixels top and bottom | |
| Resize after crop | Use 'Better Resize' (Accurate) | |
| Deinterlace | Yes | |
| Noise | Mild blur (optional) | |
| Audio codec settings | ||
| Compression | None or ... IMA 4:1 (music) Qualcomm PureVoice (speech) |
|
| Sample rate | 44.1KHz | |
| Bit depth | 16-bit | |
| Channels | Stereo | |
| Flatten file? | ||
| PC only | Yes | |
| Mac & PC | Yes | |
| Mac only | No | |
There are other alternative combinations of course. Try experimenting.
3. Optimising video in the WMV (Windows Media Video) format
Microsoft provide some encoder tools for this but are cagey about codecs and settings. Go here for more help. Anybody got any advice for this?
Optimising video in the DivX format
Download the software from divx.com , open the encoder app, select a settings template and drag your source video file onto the app. Easy! You can also fine tune the settings withy the advanced feature. Choose the Home Theatre settings and then try applying our MPEG-4 settings.
Related downloads
None at present
