Should you use GIF or WebM as your short video playback format? The answer is that it depends on the context. But as the modern web gets more and more standardized, more and more facts are in favor of WebM.
Here at TechStacker, we’ve recently switched from using GIFs to WebM for short videos in our tutorials. Today you’ll learn why we did that, and why you probably should too. At least if you care about high-quality video, performance, and want to solidify yourself as a high-end modern website.
GIF video vs WebM video comparison
I recently wrote a tutorial about CSS animations. That’s when it hit me: the GIF format is simply not good enough to render even a simple animation, without severely degrading its quality. Unless you like working with massive file sizes to get a high enough FPS (I don’t).
That’s when a colleague told me about WebM, a video/audio format that had completely slipped my radar.
Sure I heard about it before (I feel like I need to say that). But it never crossed my mind how amazing and wonderful this relatively unknown open-source software is for video (and audio) playback.
Long story short: for the most part, WebM wipes the floor with GIFs. Whoops, I just exposed my bias. But seriously, this is why:
This is a GIF: (15 FPS, 67 KB)
This WebM (15FPS, 7 KB..!)
The GIF video takes up more than 9 times as much space as the WebM video(!)
That’s a massive reduction of file size, and the WebM playback is smoother than the GIF too.
Is your mind blown yet?
I showed the GIF vs WebM comparison to few people, and some couldn’t tell the difference in quality. But guess what, even if the quality was identical, the difference in file size is astronomical, no less.
Do I have to mention that swapping out GIFs with WebMs will have a massive impact on the overall page load (performance) of your website and web apps?
WebM vs GIF
Were you already convinced by the previous segment? I understand. But if you want some more technical facts and learn a bit about the pros and cons of WebM and GIF, continue reading! Let’s lay out the basics of each technology.
Facts about the GIF format:
- The GIF format was invented in 1987.
- GIFs support both animated and static images.
- GIF is a lossless format for image files. Lossless means that it doesn’t lose quality when you reduce its file size.
- GIFs are easy to embed on all types of websites.
- GIFs are compatible in all browsers, all the way back to Internet Explorer 6 (!).
- GIFs are generally low resolution (width x height)
- GIFs are generally low FPS (frames per second) which is why they rarely look smooth (there are exceptions).
- The gif format only has support for 256 colors. In comparison, the PNG format has 16 million colors.
Altogether, GIFs are popular for a reason, they’re easy to work with, they don’t take up that much space, and they’re cross-compatible. GIF animations have become hugely popular in modern times. So much that GIF animation services like Giphy have become integrated on Facebook.
Facts about the WebM format:
- WebM is an open source audio-video for HTML5, built by Google. It was released in 2010.
- WebM’s visual quality is higher than GIFs, and at a much smaller file size (!) as you saw earlier.
- WebM is compatible with all modern browsers, but it doesn’t work in Internet Explorer.
- With WebM, you can control video playback like start, stop, autoplay and loop, by leveraging the HTML5
<video>element’s properties.
In a nutshell, WebM can do the same as GIFs can, while having superior quality and having a smaller file size.
The only thing WebM has going against it is that it doesn’t work in old archaic browsers. And that leads me to why we switched to WebM here on Techstacker (besides the obvious).
We are a modern tech company. We want to help to push technology forward, and the best way to do that is by using and promoting modern technologies (when they deserve it!).
But what about accessibility?
Well, our site analytics state that our target audience is between 15 and 45, and thus far we haven’t registered any users with outdated browsers in 2018.
Ditching GIF (for the most part) is a no-brainer for us.
GIFs are not all bad though
Animated GIFs are fine as a “video format” when you want to share a laugh with your friends. Its lousy quality is part of the fun.
Unfortunately, when video quality matters, GIFs are pretty terrible. In fact, they can make you look unprofessional. You probably shouldn’t use GIFs in a professional context, unless crappy video quality for some reason is preferred by your client.
WebM Recording tools
I was so happy using my CloudApp for recording GIF videos, as well as MP4 videos because it’s so easy to use. Unfortunately, they don’t support WebM, and they haven’t indicated that they’re going to do it anytime soon.
Too bad!
Mac users: the Kap app is the best WebM recording tool I’ve found for Mac. It’s open source and is maintained on a monthly basis on GitHub.
Linux users: I hear good things about Peek for recording WebM videos on Linux.
Windows users: For Windows Icecream Screen Recorder is a solid option for recording WebM videos on Windows.
Expect us to drop more tutorials about WebM, GIF and other video format related tutorials in the future.
Conclusion
There are a time and place for using GIFs, e.g. for fun and play. But if high-quality video at a low file size is a priority, and you don’t need to support dinosaur browsers, WebM is the way to go.
Has this been helpful to you?
You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊
