Choosing the best video format for your web site

Use the smallest video format AND ensure compatibility

Feb. 2004 • Updated March 2007

So many formats! How do you get the best video format when you have so many competing criteria, such as:

• Compatibility
• File size (smallest format)
• Video quality
• Editing software runs on your computer
• Software is affordable

Well, you're in luck. I went through those questions myself, and I'm about to share the results of my research with you.

Pick one: Compatibility or File Size

The bad news is that you can't have the best compatibility and the smallest file size at the same time. You'll have to choose which is more important to you. For most people, that's compatibility, so that's where we'll start.

For the best compatibility, use a Flash player like the Wimpy Wasp. Flash is included in all modern browsers, so almost everyone has it. You simply convert your video to a Flash format (more on that in a minute), and then you can be fairly confident that the maximum number of people can play it without having to download any additional software. Google Video and YouTube both use Flash as their preferred format, and you can easily see how much success they've had.

It's true that Flash isn't 100% compatible for everyone, but the point is, nothing is 100% compatible. Using a Flash player is simply more compatible than anything else. If you take one thing away from this page, take the fact that using a Flash player will give you the most compatibility and save you a lot of grief.

Here's a rundown of the benefits of using a Flash player:

• Maximum compatibility. Almost all users can view it without downloading additional software.
• Tiny, fast download for those users who don't have it already. The competing media players like Windows Media, QuickTime, and Real are huge and cumbersome to install.
• User-friendly startup. You can have the first frame say something like "Video loading, just a sec...", to let the user know that everything's working and the video is about to start playing. Other media players typically provide no feedback to the user, just a blank window.
• Watermarking. You can add a transparent logo to the corner of your movie (such as the name of your domain) and link it back to your website. So people may be less likely to steal your video, and if they do, it's an an automatic ad that takes people right back to your site.
• Ability to make your own custom controls. Try doing that with another media player.
• Piracy protection. It's very difficult for users to save your video to their hard drives and then post it on their own websites. On the other hand, if you want users to have the ability to download your video, then this would be a downside. In that case, your best bet is .mpg for maximum compatibility.
  
      Some of these tips are from WebmasterWorld.

Of course, the world wouldn't be complete unless there were also some downsides of using a Flash player:

• File size. Flash video takes up more space for the same amount of quality compared to tiny formats like H.264 .mov's, .mp4's, and .wmv's.
• More work. You'll need to convert your video to Flash, and then set it up to work with a Flash Player. It's not a devastating amount of work, but it's more work than just throwing a completed .mov or .wmv onto your website. This is one of the prices of compatibility.
• Visitors can't easily download the video. Unless your visitors are especially savvy, they can only watch the video, not download it. That's a plus for most webmasters, since they don't want their work easily copied, but if you do want people to be able to download, then that's an issue. You can get around this by including a zipped version of the video on your website, with a link to it, but that's not as nice as having an easily downloadable .mov, .wmv, or .mpeg file.

Flash video players you can put on your website include:

• Wimpy Wasp ($30)
• YouTube (free)
• Jeroen's Player (free for non-commercial, 15 euros for commercial use)
• FlowPlayer (free)

As you might suspect, the free solutions aren't as full-featured or supported as the $30 solution.

 

Converting video to Flash

Okay, say I convinced you to use a Flash player like the Wimpy Wasp. Now how do you convert your video to Flash? You have several options, some of them free:

Software to convert video to Flash	Cost	Runs on	Formats Converted	Other
YouTube	Free	Windows, Mac, Linux	WMV, MOV, MPG, AVI	Considerable loss of quality; they host the video file
Riva FLV encoder	Free	Windows	WMV, QuickTime, MPEG, and AVI
FFMPEG (separate page for Mac version)	Free	Windows, Mac, Linux		Mac version is easy, but Link/Windows version is highly technical and for developers, not newbies
VisualHub	$23	Mac	Nearly everything	Converts to most formats, not just to Flash. Easy, batch mode, dynamic preview, stitch files together,
Flash Video MX	$50	Windows	WMV, MOV, MPG, MP4, ASF, AVI, RealMedia, and more	Watermarks, video effects, music
Sorenson Squeeze for Flash	$249	Windows & Mac	WMV, MOV, MPG, MP4, ASF, AVI, more (but not RealMedia) Converting WMV on the Mac version requires Flip4Mac.	Powerful compression while maintaining quality, video filters
Adobe Flash Professional	$699	Windows & Mac	(Couldn't find the list on their website.)	The full Flash development software; too many features to list.

Of course, this begs the question, what format should you use before you convert it to Flash? So far as I can tell, it doesn't matter. Flash has its own compression, so trying to crunch the file real small before converting it to Flash just results in a video of very poor quality. Give Flash a high-quality video, and let it do the compression.

By the way, to convert the other way (from Flash to another format), use the free Super software.

 

Media Players vs. File Formats

Of course, you don't have to use Flash, you can use another format if you're not seeking maximum compatibility in a single format. But before we talk about those other formats, you'll need to know the difference between a media player and a file format.

A file format is the flavor of the video itself. The media player is the software that plays it. This can be confusing because some media players and file formats have the same or similar names (e.g., QuickTime), and because one media player can often play media in lots of different formats. Here are the most common media players and formats.

Media Players • Flash (e.g., Wimpy AV) • Windows Media Player • QuickTime Player • RealPlayer Technically Flash is a plugin, not a player, but you can use it to play video, so it's a player in my book. There are other media players, but the above four are the most popular.

File Formats • .fla/.flv/.swf (Flash video) • .wmv (Windows Media Video) • .asf (Advanced Streaming Format) • .avi (Audio Video Interleaved) • .mpg/.mpeg (MPEG version 1) • .mp4 (MPEG version 4) • .mov (QuickTime) • .rm (Real Media) Formats in brown are container formats and can contain video compressed with a variety of different codecs. More on that below.

 

And here's who has what preinstalled:

What's Preinstalled	PC	Mac
Flash	✓	✓
Windows Media Player	✓
QuickTime		✓
RealPlayer

Not as many Windows users have WMP as you would expect for some reason. I'm guessing it just wasn't preinstalled in every version of Windows. In an April 2006 survey, only 85% of users had WMP installed, vs. 98% for Flash.

If you don't have a media player, you can download it. Every media player listed above will run on both Macs and PC's. But if you're putting video on your website, you probably want to go with what users already have installed. If you depend on visitors to download and install a media player to view your video, they might just abandon your website instead.

Note that although you can download WMP 9 for Mac OS X, Windows has discontinued development for the Mac so there won't be any future Mac versions.

 

Here's what the media players can and can't play.

What player plays what	Flash	WMP 11	WMP 9 (Mac)	QuickTime Player	RealPlayer
.fla	✓
.swf	✓			✓	✓
.asf		✓	✓		??? - Couldn't find the list on their website. Very annoying.
.wmv		✓	✓	Can play .wmv on Macs if you buy Flip4Mac
.avi		✓		(depends on codec used to compress the video)
.mov				✓
.mpg		✓		✓	✓
.mp4				✓	✓
.rm					✓
		Here's Microsoft's list of what formats they support and what they don't.		See below to how to make your server MP4-compatible.

Media players can play audio content too (e.g., .mp3, .aac), but this article deals with video only.

But wait, it's even more confusing. Video is compressed with something called a codec. Sometimes the codec and the file format are the same, like with .mpg. But some file formats can contain video compressed with a variety of codecs. For example, .avi can contain video compressed with MPEG-2 or DivX codecs. That's why QuickTime's ability to play .avi files depends on what codec was used to compress the video.

Here are some links that talk about the marketshare each media player has.

• Adobe. This is most recent survey I could find, April 2006. Shows 98% penetration for Flash, 85% for Windows Media, 68% for QuickTime. They're a little biased since they own Macromedia (which makes Flash), but I have no reason to doubt their numbers.
• Macromedia. These guys are a little biased since they make Flash, but I have no reason to doubt their claim in April 2004 that WMP had only 61% penetration at that time, compared to 93% for Flash.
• WebOptimization.com. Graph from March 2006. Unfortunately it's just raw numbers, not % of users with each player installed, and it doesn't include Flash, because they consider Flash a plugin, not a player.
• StreamingMedia.com. Aug. 2004 article puts the media player market share numbers into perspective.

 

Alternatives to using a Flash player

Okay, let's say that for whatever reason you don't want to use a Flash Player like the Wimpy Wasp. What should you use instead?

The next-most compatible format is an .mpg format, since if a user has either Windows Media Player or QuickTime they'll be able to view it. (iMovie on a Mac won't expert to .mpg, but you can use the cheap VisualHub software I mentioned above to convert from QuickTime to .mpg.)

After .mpg, the next-most common format is Windows Media (.wmv), but Mac users can't see it without installing extra software.

Apple's QuickTime (.mov) is at the bottom of the list because it's only pre-installed on Macs. Windows users can install QuickTime, but of course many of them won't bother to install software just to watch your video.

Smallest file sizes vs. video quality

Ugh, this is a big topic and one I honestly don't know enough about to give you a detailed answer. What I can tell you is that if you're ultimately converting to Flash, I don't think you have to worry about squeezing the file first, because Flash will do that. In other words, give Flash a nice, big, high quality file, and let it do the compression.

If you're not converting to Flash, then most modern software seems to do a pretty good job of compressing video while maintaining quality, and there doesn't seem to be a major difference in file size or quality from one to the other. In this discussion I'm talking about Windows Media Video created on Windows, and QuickTime when exported using a Sorenson or H.264 codec in Apple's iMovie. And when you convert these to Flash, they should maintain their file sizes and quality.

You can go one better by using the Sorenson Squeeze for Flash software mentioned in Converting video to Flash, above. It claims to have the best compression around.

Notes about the different video formats

This is the modern format of choice because it's the most compatible. More users have Flash installed than any other media player, so more of them will be able to view your video than a video in any other format. You'll just need to install a Flash Player on your website like the Wimpy Wasp, and convert your video to Flash. Software to do that is listed near the top of this page. Here are the differences between the files:

• .fla - This is the "project" file, from which you export your movie. You never upload this to your server.
• .flv - This is the raw video file itself. You upload this to the server.
• .swf - This is the movie file that pulls in the video file. You upload this to the server.

MPEG is well-supported -- it runs under both Windows Media Player and Apple's QuickTime, so if your visitors have either player installed than they can play it without downloading additional software (though some users won't have one of these installed, which is why Flash is usually a better option). Downsides include the fact that you can't create this format on a Mac with iMovie unless you buy additional software, and you don't get all the nice features that you would with a Flash player, like live watermarking, a "Video is loading" message, etc. Also, .mpg can't be streamed, though that seems to be less important than it used to be now that all video players incorporate fake streaming.

These are Microsoft formats. They're a poor choice for websites because Mac users can't play them without installing additional software.

If you're using a Mac and want to create .wmv files, your best solution is to create them in any standard format, and then convert them to .wmv with the $23 VisualHub software.

As to the difference between .wmv and .asf, this is from Microsoft's website: "Files that contain digital media content encoded with non-Microsoft codecs may not use the .wmv and .wma file name extensions, even if they also include streams encoded with Microsoft codecs. Such files must use the .asf file name extension. For more information, see the End-User License Agreement (EULA) for the Windows Media Format SDK."

QuickTime is Apple's format, and Apple's iMovie easily creates movies in this format. Windows users have to download QuickTime (~9Mb) in order to view .mov videos, though.

If you do use QuickTime, make sure to save your files as self-contained (instead of "normal"), and note that the H.264 and Sorensen 3 encoders generally produces the smallest files with the best quality. In my tests my video used about 5Mb/minute, when exported at 320x240, 12fps, medium quality with Sorenson3.

To embed the movie in your webpage you'd use HTML like this:

<embed src="filename.mov"AUTOPLAY=true CONTROLLER=true LOOP=false
PLUGINSPAGE="http://www.apple.com/quicktime" width="240" height="196">
<noembed>Get QuickTime</noembed>

Apple's Developer site describes the embed tag in more detail.

QuickTime is a container format, which means you can use any of several different codecs for compressing the software (e.g., H.264, Sorenson, etc.).

 

MP4 makes very small file sizes. In my test exporting with iMovie, the size was about 2Mb/min., with the video @ 320x240, 24fps, 64kbit/sec. Unfortunately Windows users can't see the video unless they download and install QuickTime. But you could still export to .mp4, convert to Flash, and then use a Flash Player like Wimpy AV Player. That way you get the file compression advantage of .mp4 married to the compatibility of a Flash player.

If you decide to use .mp4 on your website straight (without converting it to Flash first), you may have to add the following line to the .htaccess file on your web server to get the .mp4 files to play properly in web browsers. Otherwise the browser might just show all the data in the file instead.

AddType video/mp4 .mp4
               

.avi is a container format, meaning that it's not really its own format, it contains video compressed with some other codec. That means that your computer might play some .avi files (where you have the proper codec installed) while failing to play others. Nice.

When I tried to export to .avi with iMovie, iMovie wouldn't complete the export, it would stall when the progress bar finished filling up completely. And the file on my hard disk that it almost finished creating was huge.

iMovie gives me the option to export to .avi DivX but it exports at 720x480, and I can't find any way to change the export size. I'm also not sure whether the ability to export to DivX came with iMovie or whether it appeared after I installed some software to let me view DivX movies.

 

This is the worst format of all:

• Won't run in Windows or Mac browsers without downloading extra software
• When users go to download the free Real player, Real tries to trick and cajole them until buying the pay version or signing up for subscription-based content. (And if you accidentally do, like I did, then they chastise you when you try to cancel or complain.)
• No free creation tools
• Why bother?

Streaming

Usually when you get a file from the Internet it's downloaded to your computer. This isn't the most efficient way to get video because there's a lot of overhead in checking to make sure that all the data was received correctly. By contrast, when video is streamed then it's just spit at your computer with no regard for the integrity of the data, so you get that data much quicker, though there could be some dropouts. Another advantage of streamed video used to be that users can start watching the video right away, without waiting for the whole file to download, but most modern browsers and media players mimic this behavior even when they're downloading the whole file by beginning to play the file as soon as they figure they can deliver a continuous playback.

In most cases there's no need to stream your video. But if you want to, you have to do two things:

• When exporting the file look for the checkboxes that indicate that the file will be streamed
• Put the file on a streaming server. Dreamhost offers streaming servers on even their chpeast ($10/mo.) webhosting plan.

Other Handy Mac utilities

MPEG Streamclip. For both Mac & Windows, lets you easily edit .mpg files in a QuickTime Player-like interface. Also joins movies together. Nice. Best part, it's FREE!

Visual Hub. This is the Swiss Army Knife of video conversion. It's fast and simple, and only $23.