Collaborator-8-3-CTA-banner

GIF is Dead; Long Live WebM

webM-project

The GIF format was given new life for its animation capabilities, but WebM blows that away

The GIF format had been left for dead following the LZW patent dispute of the mid-1990s, but enjoyed a resurrection thanks to the demise of said offending patent and the realization that they could be animated. GIF files actually store multiple images in one file, along with control data, allowing for animations.

Websites and animators alike have gotten a lot of mileage out of that, converting animations and video files into short animations. Animated GIFs are part and parcel of sites like BuzzFeed, but there were limits to animated GIFs. The size would grow huge and resolution was only so sharp.

“Animated GIFs are showing a resurgence, but they are only really suited to certain outputs. Those 20 frame looping animations of cats falling off sofas you see are the kind of animations they are suited to – small number of frames, looping,” said Kev Adamson, a professional illustrator and graphics designer. “It tends to be that file size and output quality means a complex movie with many frames would not be appropriate. This is where video has the advantage.”

But a few years ago, Google presented developers and designers alike with an alternative, the WebM format. WebM is an open source audio-video codec for HTML5 video currently owned by Google, but built on open technologies it acquired from On2 and licensed from Xiph Foundation and Matroska.

The WebM format combines the On2 VP8 H.264 video codec, the Matroska container, and Xiph’s Vorbis audio codec to make high resolution video with audio that’s embeddable into Web pages. In addition to the audio, the images can be resized. That’s two things animated GIFs simply can’t do.

Google announced the format in 2010 at the Google I/O Conference and released it later in the year. At first, Web adoption was slow. It wasn’t until earlier this year when 4chan — the closest thing the Internet has to the Mos Eisley Cantina — adopted WebM over animated GIF that interest in WebM kicked into high gear. 4chan’s owner, Christopher “moot” Poole said WebM had the advantage over animated GIF through “superior image quality, support for more than 256 colors, and reduced file size.”

WebM also has healthy support coming from Reddit, which has subreddits like /r/webm, /r/webms, and /r/webmvideos.

VP8 has quietly become very popular with videoconferencing products. Both hu.tt (developed by Citrix) and appear.in (developed by Telenor) use VP8 with WebRTC for video conferencing. In addition, products like Chromecast and Chrome Remote Desktop use VP8 for screencasting and remote desktop applications.

Currently, Google Chrome, Mozilla Firefox and Opera support WebM natively, while Internet Explorer and Safari do not, but plugins are available for the latter two so users can see the video. Adamson said that developers should have a fallback option along with their WebM use built on Ogg audio and MP4 video, and then a second fallback, a link to download the MP4, should the browser have no support for HTML5 video.

Google describes the WebM project as a continuous project where they are continuously making changes for better performance, compression, efficiency and more. The VP8 codec is being used in Google services like Google+ Hangouts and Chromecast, video conferencing services Amazon’s Mayday service, hu.tt and appear.in.

Core Components

As said earlier, WebM is three technologies in one. Let’s run them down:

On2 VP8 H.264 video codec: First released in 2008 by On2 Technologies. After Google acquired On2 in February 2010, groups like the Free Software Foundation called on Google to release the VP8 source code, which Google did.

For transforms, VP8 uses a scheme very similar to H.264, where each 16×16 macroblock is divided into 16 4×4 DCT blocks, which are then transformed by DCT approximation. VP8′s intra prediction, used to guess the content of a block without referring to other frames, is said to be copied part and parcel from H.264’s i4x4 mode. Inter prediction, used to guess the content of a block by referring to past frames.

There are some differences; VP8 doesn’t do 8×8 transforms, it uses large multiples in its transform, and it uses a Hadamard hierarchical transform for some inter blocks. This might hurt it at high resolutions. And VP8 does not use B-frames, while H.264 does.

The end result is that in one set of tests, H.264 did better with lots of motion while VP8 did ok with videos that had little background action. This might be because VP8 specifies exact values for reconstructed pixels. It does not allow for any drift caused by truncation of fractions. It uses a very fixed-precision integer in playback, which means more precision and less guessing.

Matroska container: Matroska makes it abundantly clear on its site that it is not a file format or codec, it is an envelope for which there can be many audio, video and subtitles streams, allowing the user to store a complete movie or CD in a single file.

Matroska was derived from a project called Multi Container Format (MCF), which has since been abandoned. Matroska is based on EBML (Extensible Binary Meta Language), a binary derivative of XML that is used exclusively by Matroska.

MKV is an extremely popular as a container, mainly because it supports nearly any video codec, has many extra features like features alternate audio tracks, multilingual subtitles and chapter points, rich metadata including cover art, ratings, descriptions and more, making it especially popular with DVD mastering. Plus, it’s open source.

Xiph Vorbis audio codec: Also known as the Ogg Vorbis code, it’s entirely open source and patent- and royalty-free. It supports audio quality ranges from 8kHz to 48.0kHz, 16+ bit audio and music at fixed and variable bitrates from 16 to 128 kbps/channel.

While popular for its open source license, files compressed with Ogg Vorbis are much more heavily compressed than other formats, like FLAC and MP3. That means more CPU power to decide and play back. For PC users, that’s not an issue. For mobile users, like smartphone and portable music players, it is.

Tools and Uses

Adamson said, ideally, WebM should be used for video style content and long complex animations. “If you need a short animation for a web page – perhaps as part of the UI – then CSS animation would be best for this, rather than HTML5 video,” he said.

As for the tools, there is nothing official yet like Photoshop and Illustrator, but they are getting there. Using these animated files doesn’t require anything specific on the server side, with the exception of a way to detect when a user’s browser does or does not support WebM and fall back to GIF in those cases.

The WebM team and a growing group of partners are working on expansion of the tools, in particular, an encoder that excels at both fast, high quality offline and realtime encoding. And since the entire project is open source, it will all be released, said Google.

Adamson said the tools are “Great. There are many online video conversion tools. Cloud Convert is a service I have used in the past, so even if your video / animation software doesn’t have a method to export to WebM, there are plenty of online tools available to convert older, more established file types,” he said.

Google has advanced the VP8 codec to VP9, which offers much smaller file size and is more suitable for streaming. Google is said to be converting many of its videos on YouTube to VP9 to reduce overhead for video streams. But for now, WebM remains VP8 powered.

See also:

Comments

  1. Really? No IE and Safari support means it’s not a replacement in my book. I don’t think people are worried about audio for falling cat videos. They only want to be six seconds long as that is all the jokes mostly take. The charm of an animated GIF is its short jumpy loop. I can’t see WebM taking over any time soon. Replacing flash videos is a different matter.

Trackbacks

  1. […] will supposedly replace the aging animated GIF at some point. A recent articled entitled, “GIF is Dead; Long Live WebM” explains the technical details of why this file format is so superior and why developers […]

Speak Your Mind

*