Video guide: what format is best for website, YouTube or Vimeo?

Reading time: 6 minutes Author: Thomas Published: Last updated:
Content

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. 

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.

As you can see, using videos to increase the dwell time and value of a website is possible but it also has its pitfalls. Therefore, we explain 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.

display-ad-finden-pixxio-bildverwaltung.png

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 media workflow for your team by using media management to organize, manage and share your files. Try pixx.io for free here and register an account

Booming of VOD portals such as YouTube and SVOD offerings like Netflix show the importance of moving image content.

What video formats are there? 

Commonly known video formats include MP4, AVI, MOV, and 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.

What video codecs exist?

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.infografik-videoformate-banner-pixxio-bildverwaltung

Download “videos for the web” a practical infographic

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, MP4 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.

The perfect match: video formats, codecs, and browser compatibility 

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.

So, what should you do so that the video is compatible with every browser? 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.

How do I manage my videos? 

Do you deal with video files and formats professionally? As with your images, organizing your video files and other media with an image management tool like pixx.io makes life a little easier. For example, you can efficiently find your media, combine projects into collections, and share videos and images with just a few clicks.

Thomas
Thomas

As a game editor, Thomas has had experience producing engaging and SEO-compliant content, ultimately bringing him to pixx.io. Quickly taking on digital marketing responsibilities, he is now in charge of business intelligence and other processes. Thomas enjoys winding down with video games or an occasional hike outside of work.

Deine Browsersprache ist Deutsch, möchtest Du zu der deutschen Website wechseln?