What is the best video format for websites?

Using videos to increase the dwell time and value of a website is possible but it also has its pitfalls. Find out which video formats and browsers go together, and which formats are suitable for online use. Additionally, we introduce you to the most common video types and codecs that make your work with videos easier. 

The idea of adding video content to enhance websites, for example, has existed for some time now. Yet, the necessary amount of data volume and internet connection weren't always a given. And so, digital newspapers with moving images were only known from science fiction movies. Meanwhile, DSL and cable internet can provide websites with high-quality videos right from the start.

The advantage: Our brain processes moving images significantly faster than regular text or images, often resulting in an increased dwell time –  provided that the content is exciting and appropriate to the subsidiary theme, of course. 

However, not all video formats or codecs make for web use, as not every browser fits every file format. Also, it's essential to strike a balance between quality and file size because video files that are too large jeopardize rankings with search engines by slowing down the loading times of a page. Using the right video format for your projects is therefore crucial.

Commonly known video formats include

• MP4

• AVI

• MOV

• MPG

Although the list could go on forever. Manufacturers of more prominent companies usually want to enforce their formats, such as Apple with QuickTime (MOV) or Microsoft with AVIu and ASF/WMV.

So, if you find yourself discovering new formats frequently, now you know why.

Strictly speaking, video formats are just filing containers where you store different contents, including pictures, audio, and, if necessary, information like subtitles or time stamps.

Much more important are the codecs with which the image and sound tracks in the container are encoded. Codecs ensure that the media files consume as little storage space as possible while maintaining the best possible quality. Let's dive right into the 8 most common video file formats.

MPEG 1 and MPEG-2 (m2p, mpg, mpeg, ts)

MPEG-1 is one of the oldest video formats, also while being a container and codec at the same time. Although its codec is recognized and played by almost all devices and browsers, MPEG-1's age is noticeable. For example, HD videos are no longer achievable, and the videos' quality is worse than it is good.

Things start looking different with its successor MPEG-2. Found under the same file extensions as MPEG-1, the codec is standard for DVD videos and many TV stations. Also, compared to MPEG-1, the quality is much better, and the distribution of the format is large. Nevertheless, MPEG-2 is less suitable for the web because its compression is comparatively low, and accordingly, good quality videos mean many megabytes more.

 Creating videos and clips with good quality isn’t a big problem nowadays

AVI (avi)

Like MPEG-1, AVI is an old format - yet, having evolved, it supports good quality HD video with good compression thanks to codecs like DivX. AVI is most widely used, but it is only partially suitable for integrating into a website because it's not streamable.

ASF (wmv, asf)

To most people, the file ASF is probably more known as WMV. This format, developed by Microsoft, can be streamed, unlike AVI. ASF or WMV has similarities with MPEG-4, so it is suitable for online use. However, because of its low distribution, not exactly recommended.

Flash and 3GP

These two formats are virtually no longer found on the web. Initially, 3GP's intention was a highly compressed mobile format, with Flash found on almost every website. Meanwhile, there are improved codecs/formats with MP4 and WebM that are suitable for web applications.

QuickTime (mov)

MOV files are native to Mac devices. However, Apple has managed to make this high-quality video format a standard in professional media editing. Many editors work with MOV in programs like Premiere or Final Cut.

With that said, QuickTime is mainly reserved for professional editors and thus not commonly used. Accordingly, it's less suitable for use on websites.

Editors often use QuickTime as their source format, but they need a format and codec that compresses the content and can be used on websites.

Matroska (mkv)

Like Russian Matroska dolls, the Matroska format can stack inside each other. This format is widespread, especially among home theater fans, as it works with many codecs. Compatibility with browsers, on the other hand, is not particularly remarkable.

MPEG-4 (mp4, m4v)

MP4 videos are incredibly flexible as they allow a lot of codecs - this format is optimal for good image quality and small file size. Therefore, the MP4 video format is also perfect for website use. The most broadly used codec is H.264, but other codecs (DivX and Xvid) also get chosen in some cases.

Did you know? MP4 is the standard for HD television and Blu-rays. 

HTML5 (WebM)

WebM is based on Matroska and thus combines well with various codecs. The whole concept of this format indicates it will become the new standard file type for internet use in the future.

Did you know? Plugins aren't needed for WebM in HTML5. HTML5 replaces formats such as Flash and 3GP. Youtube, for example, has already switched from Flash to HTML5. This format is already widely used and supported by many browsers.

So what is the best video format for online use?

For online use, MP4 with the codec H264 and WebM with the codec VP8 or VP9 are particularly suitable because of their high compatibility.

In the current version, MP4 works in all common browsers, i.e., Android, Chrome, Internet Explorer, Edge, Firefox, Opera, and Safari - only Firefox on Linux requires a plugin (FFmpeg). Further, all universal browsers support WebM; the only exceptions are Internet Explorer and Safari.

If you want to optimise your videos for social media, they have to meet a few important requirements. Otherwise they will not be displayed properly.

Which video format is best for Instagram?

• Video format: MP4 or MOV

• Audio: AAC

• Video codec: H.264

• Frame rate: maximum 30 frames per second (fps)

• Maximum file size: 15 MB

Video format for YouTube

On YouTube, you are relatively flexible when it comes to the format. However, the MP4 format is recommended because it offers a small file size and a high compression rate at the same time. More facts about the video format on YouTube:

• Video format: MP4

• Audio: AAC-LC

• Video codec: H.264

• Frame rate: same frame rate as recording, common are 24, 25, 30, 48, 50 and 60 frames per second

• Maximum file size: 256 GB

Fortunately, different video formats can be stored on websites and then automatically played in the appropriate format on the browser. MP4 and WebM are what we still deal with today but using only one format (WebM) should possibly be sufficient in the future.

Currently, we encourage you to use WebM for Android, Chrome, Firefox, and Opera and store an MP4 version for Internet Explorer, Edge, and Safari.

If you deal with video files and formats professionally you probably need a tool to manage everything easily. As with your images, organizing your video files and other media an image management tool like pixx.io makes life a little easier.

With pixx.io you can efficiently browse your media, combine projects into collections, and share videos and images with just a few clicks.

The Expert Tip: When you store your templates such as image and media files in pixx.io, all your colleagues have access to them, can open and edit them directly in the image-editing program, thanks to various plug-ins.

Optimize the entire video workflow for your team by using media management to organize, manage and share your files.