It is 2019 and we need to make a decision about GIFs ( no, not that one! We’re never going to be able to decide that one!). GIFs take up a massive amount of space(often multiple megabytes!) and if you’re a web developer, then that’s completely against your ethos! As a web developer, you want to minimize the bits your users need to download so that your website loads fast. That’s why you minify javascript, optimize PNGs, JPEGs and sometimes turn JPEGs to WebPs as well. But then what about the venerable GIF?
Where we are going, we don’t need no GIFs!
If your goal is to improve your website’s loading performance, then a GIF needs to be yanked! But then how do you have moving pictures? The answer is a video. And in most cases, you’ll get better quality as well as almost 50–90% size savings! In life, most things have a pro and a con. When you’re replacing a GIF with a video, in majority of the cases you’ll be hard pressed to find a con
Replace all the GIFs!
Fortunately, replacing GIFs with video has now been common for a few years so the tools needed to pull off this trick are already in play. In this blog, I’m not going to break new ground, but improve upon what already exists. So, here’s the lowdown on what you can currently do:
- Take a GIF and convert it into video
- Encode it with H.264 or VP9 codec i.e. compress it and package in a MP4 of WebM container
- Replace animated GIF
<img>elements with<video> - Set the video to play automatically, sliently and in a loop to replicate the GIF functionality
Google has a good documentation page describing the process.
It is 2019
It’s 2019. Tech moves forward and we need to move with it. Until now you’ve had two choices of codecs that are widely adopted across all browsers and platforms for encoding the video:
- H.264 — Introduced in 2003 and the most widely used codec today
- VP9 — Introduced in 2013 and achieves up to 50% more compression compared to H.264 most of the times but it can look worse sometimes according to this discussion on reddit.
NOTE: Even though H.265 is the next-gen version of H.264 and competes with VP9, I’m not including it in this comparison becuase of lack of browser support as noted on https://caniuse.com/#feat=hevc. Licensing costs is the major reason why H.265 is not as widely adopted as H.264 and why Alliance of Open Media consortium is working a royalty-free codec i.e. AV1.
Remember, our goal is to reduce the humongous GIF to as small a size as possible to improve our webpage loading time. It wouldn’t be 2019 if we didn’t have a new video compression standard we could encode to. This is called AV1. With AV1, we are able to achieve ~30% more compression compared to VP9. Exciting! :)
Serving you AV1 since 2019!
Read the rest of the story @ https://www.singhkays.com/blog/its-time-replace-gifs-with-av1-video/
