How Can Html5 Video Improve the Performance of Animated Gifs?
0Let’s be real, it is tough to capture user attention these days. In such a scenario, animated GIFs allow users to consume the content and engage with it easily. Animated gifs are film formats that combine a series of frames in an order that finally forms an animation. They are becoming more and more popular on the web and emerging as a great tool to connect with users.
Animated GIFs were not originally created for animation or to store videos. Indeed, GIF files were created to contain several images in a single file mainly to reduce overhead by combining redundant information like color or header data of each image. Compressing them into a GIF ensures that they can be downloaded in a short amount of time even on slow Internet connections. It is not just a decade since GIFs were invented and Netscape 2.0 browser added an application extension enabling animated GIFs to be like what we see today.
Animation capabilities were added to allow different images or frames in the file to be associated with time delays. By its very nature, the series of images that constitutes the GIF was designed to display just once. However, Netscape Navigator 2.0 added the ability for animated GIFs to loop resulting in today’s GIF files.
Animated GIFs are super easy to add to any website, you can just upload and treat them as images. However, their format is not that friendly for displaying animation and video as they come in huge sizes. When you want to optimize your website and improve its performance, the first thing you need to do is to reduce the size of GIF files in your web pages as it can slow down your page speed. Converting GIF files to HTML5 videos can help to reduce their size significantly.
Why is it important to optimize GIFs?
Performance is what ultimately matters when it comes to designing your web pages. While GIFs are great to capture user attention, it is not very great in terms of performance. The main reason for this is GIFs were not designed for animation initially. Using GIFs results in slower page load speed finally leading to poor user experience and heavy web page weights. This is exactly why it is important to optimize GIF files when using it on your website.
How to improve website performance when using GIFs?
In most cases, Animated GIFs are large files that need more load time. Let’s look into effective ways you can improve your website performance when using GIFs. As we already discussed, GIFs that are just a couple of seconds in length can be a little huge in size. Hence, to enhance the performance of the website containing the GIF, you can use any of the following techniques:
- Lossy optimization
- Converting GIFs to HTML videos
Lossy optimization
Lossy optimization techniques help to optimize animated GIFs by using the command line tool gifsicle. Lossy optimization work great as the human eyes will not be able to differentiate between subtle color changes. For instance, an image constitutes thousands of shades of a single color with one pixel displaying negligible differences from the other pixels. As viewers won’t be able to distinguish between two shades, images can be easily manipulated, to make the files smaller.
As mentioned, GIFs are a collection of individual GIF files, it is easy to use lossy optimization to reduce the size of the animated GIF. By reducing the size of each file, your final file will be smaller in size.
Converting GIFs to HTML5 videos
It is possible to reduce the overall size of a GIF file, but again, the final output will still be a large file. Another great alternative that could make GIFs even smaller (up to 95%) is by converting it to HTML5 videos.
HTML5 video is nothing but a term used to define the ability of modern browsers to play videos using the
1 |
<video> |
tag without using external plugins. Before the existence of HTML5, videos were played in web browsers with the help of external plugins like Flash. While HTML videos need a significant amount of time to encode, it offers a lot of benefits compared to an animated GIF format including the following:
- Enhanced performance
- Small size
- More details and colors
When it comes to HTML5 formats, WebM, MP4, and Ogg are the supported formats. Among these three, MP4 format is one of the commonly used video formats with over 94% of web browsers leveraging this compression format.
In terms of quality, the HTML5 video surpasses the quality of GIFs. As video file formats are basically created for videos, they will have natural capabilities to manage moving images, both animation and video than in a better way than animated GIFs.
How to convert GIFs to HTML5 format?
To convert animated GIFs to videos, there are a lot of valid methods including free tools. But the easy way is to use the popular open-source software suite FFmpeg to process video and audio files and to convert GIFs to video formats.
- Install FFmpeg and execute the FFmpeg code to convert the desired GIF file into an HTML5 video.
- Open the window terminal, change it to the location that has the GIF, and run this code:
ffmpeg -i input.gif output.mp4
The -i implies the GIF file inputted and output is named.mp4 as we are converting it to video.
Once you enter the command, the output file will be automatically saved in the storage location specified by you.
FFmpeg has a lot of options that you can leverage to fine-tune the final output. For example, you can employ an encoding method for rate control named Constant Rate Factor to ensure that the video output is of the best quality.
This is the basic command for the same:
ffmpeg -i input.gif -b:v 0 -crf 25
The –b:v flag in the command is the element that limits the bitrate of the output file. Hence, when used along with CRF, make sure its value is always fixed to 0. The –crf takes any value between 0-51. The higher the CRF value, the better the quality of the output, and the bigger the size of the file.
Benefits of HTML5 videos over GIFs
One of the most significant applications of this comes when you are running banner ad campaigns for any website. The entire process of planning, creating, and monitoring banner ads itself is a hassle. So in order to make the experience more pleasant for your audience and successful for your business, it is important to optimize the GIF files in your banner by converting it to HTML videos. Interestingly, all those GIFs you are seeing on popular websites are not actually GIFs, they have been converted to HTML5 videos considering the performance aspects. For example, Twitter has already opened up that it converts animated GIFS to MP4 formats when uploading. Some businesses also create GIFs out of their live videos to allow their users to revisit the memorable moments. In such cases, using any professional live streaming software to convert GIFs into video formats is recommended.
Here are some of the reasons why people prefer HTML5 videos over animated GIFs.
Better quality
While animated GIFs are limited in terms of color palette as it contains only 256 colors, HTML5 videos are not limited to any such restrictions. This makes room for more stylish and creative videos that engage your viewers and thereby increasing the click-through rate. This has numerous other benefits as it offers more lucrative opportunities to make money while improving the metrics that help in increasing your search engine ranking.
More creative freedom
Both GIFs and HTML5 videos are supported on all web browsers, HTML5 videos essentially act as another web page enclosed in them. For the same reason, designers can effectively use other scripts like JavaScript and CSS to enjoy more creative freedom when working with HTML5 than GIF files. GIFs are limited in scope and give designers little room to bring in their creativity. Moreover, if you are converting GIF files to HTML5 videos and using in the banner ads, the chances are that they will convert significantly higher than GIF files.
Compact file size
As we have already stated many times, file size is one of the major issues when using GIFs. While animated GIF files need to be locally uploaded and hosted, HTML5 can be easily embedded. In short, it can be very difficult to maintain the right balance between engaging GIFs and its file size. However, HTML5 videos are significantly low in size and hence are much faster to load. Slow page loading time is one of the common reasons that users abandon a webpage, a major issue that HTM5 videos help to tackle. With an improved page loading speed comes better user experience, click-through rates, engagement, etc.
Mobile friendly
The adaptability and flexibility of HTML5 videos make it ideal for mobile browsers. As more than 65% of the search comes from mobile users, it is important to make sure the webpages of your site are mobile-friendly. It is incredibly important that your web pages must be optimized for different screen sizes to enhance the browsing experience of smartphone users. GIF files aren’t as responsive on mobile browsers as they are in web browsers. This results in a poor viewing experience with GIFs taking up a long time to load or failing to load.
Image clarity
In the current era of the high retina screens, GIFs can look pixelated as they are created to the one size they are intended to display. Although HTML5 ads are also built to this size, they can be retina compatible as they are made of multiple files.
Video smoothness
When it comes to video streaming, the main characteristics that affect video smoothness are streaming, size, and adaptive bitrate. If you are thinking about how to set up a live streaming website, this is an important factor to consider. Both animated GIFS and H.264 (popular video codec) videos can be streamed. However, H.264 videos use HTTP live streaming technology by Apple. With this technology, a video file must be broken into small chunks that can be downloaded and played segment by segment. These video chunks will be fetched before the streaming sessions and they play an important role in guiding the playback device by allocating the location of each video chunk.
These video chunks also allow the video to be cached more efficiently in CDN. However, for GIFs, the entire file needs to be cached. Adaptive bitrate streaming on the hand is a technique that is essential in enhancing the user experience by adjusting the quality of the videos based on the condition of the user’s network. This helps to improve the video smoothness by switching to a low-quality version when the network loses its stability and vice versa. As HTTP live streaming videos are already in segments, adaptive bitrate video streaming comes naturally.
Conclusion
By converting animated GIFs to HTML5 videos, it is easy to offer great GIF-like experience to users without having quality and performance drawbacks. Replacing GIFs with HTML5 is great if your website is GIF heavy and you want to do something about it. In this way, you can still offer an awesome GIF-like experience to your audience without causing it to affect the quality and performance of your webpages. Taking time to convert the GIF files on your website to HTML5 videos can lead to significant improvements in page load time and performance of your website.