What is a GIF?
In short, GIF is basically an image format which stands for “Graphics Interchange Format”. Usage of it gets popular in the recent years, especially for animation. But it was initially introduced 32 years ago in 1987. By the time the main difference GIF brings to the industry is that, it enable users to have animated images. Which is not the main point behind the format during the development phase, their main purpose is to serve multiple images in single image format by creating better compression. By the time it turned into "GIF animation". However, initially it had few flaws. Firstly, it allowed only 256 different colors. To compare it with the general RGB channeled images, each channel contains 256 different colors. So, this caused quality issues when the GIF animation color changes quickly. Like many image formats it evolved through time and currently GIF animations do support even transparency channel. But by the time it doesn’t get replaced by any other format, which is the general behavior observed throughout the industry. Reasons behind that are actually simple,
Compatibility, Marketing and Content Consumption Trends
When the gif introduced, it is designed as an image format. This turned out to be a great time advantage for it. Because in HTML, <img> tag was introduced in 1992. On the other hand, <video> tag was introduced in 2007. Which is the common tag that was used by many of the alternatives such as WebM, mp4 and so on. But it is also important to mention that <img> tag is not better than the <video> tag or vice-versa. They are just different tags used for different purposes.
For instance, <img> tag turns out to be the exact use case for the gif since it falls under the category of “image formats”. It delivers the fundamental requirement of displaying it, even if the GIF is animated. Also, it is important to add that, <img> tag also supports the mp4 extension. At this point you may ask, “Why does mp4 matter when compared to GIF?”. Well it does matter because,
a) GIF has lower-quality: The GIF format uses a compression method call “Lempel-Ziv Welch” which is not an optimal for lossless compression. Also, as we mentioned previously, gif format also uses a limited color space which in combination with LZW creates artifacts. Hence, low quality.
b) GIF has larger file size: In addition to the properties we mentioned above, the compression is done for every single frame, for each image. Unlike GIF, mp4 mainly uses H.264 compression which compresses the clip as a whole. Therefore, it is more efficient, effective and create smaller sized files.
From the reasons above many websites decided to do operations under the hood. Which can even consist of serving mp4 files in the <img> tag. Also, the way that they do it is very clever. Which is letting users upload GIF formatted files, then they convert the uploaded file to mp4 format in back-end. This process can be done easily via open source software like ffmpeg. After that, they either put mp4 formatted file to the <video> tag or <img> tag depending on the purpose. While choosing a tag, performance and user experience is generally the main concern.
Performance-wise, using <video> tag for GIF may decrease website performance therefore has a negative effect on SEO. For example, until the video is fully loaded, the window.load() function won’t be triggered, therefore causing delays. Yet worse, there are javascript players. If you embed video from a streaming or a video platform it generally ends up in this category and they may cause serious performance issues. On the other hand, this is not the case for the <img> tag. Also, at this point it is important to mention that, there are also combined use cases. For instance, when GIF animations are placed inside <img> tag which is nested in the <video> tag> and it does few things. Firstly, it creates much more redundant delivery medium. If for whatever reason the video cannot be loaded, the GIF can be served instead. In addition to that, the controls can be removed and the video can be looped. This also brings us to the next point while choosing tags, user-experience. You won’t be able to customize the playout in <img> tag. But contrarily, you can make customizations on your <video> tag. Those customizations can include but not limited to,
· Looping
· Auto-playing
· Muting
User-experience is one of the key factors that determine the way of delivery for gifs. To emphasize its importance, let’s look at some example situations.
1. Imagine you want your users to be able to download the content that you have put on your website. If you decide to deliver to content via <video> tag, it is much more difficult for users to download. Because unlike <img> tag, users won’t be able to save as usual. They need to download via a 3rd party software, or you will need to provide download mechanisms. Which is obviously additional work for such a simple task. Therefore using <img> tag makes more sense in this situation.
2. Imagine that your users don’t worry about downloading content from your site, rather they want to enjoy the content that you’ve share. In this case what you might want to do is deliver the content at perfect quality with sound and all of the engaging features. So, in this case delivering the content via <video> tag might make more sense.
As can be seen, the usage of GIF animations and other formats are heavily dependent on the use case, which can easily be understood by the vague examples given above.
However, thing mentioned above only set the scene for the gif format. Main usage increase came with the dynamic changes on the marketing and content consumption. The consumed content medium shifted towards to mini, muted and looping animations from written and other type of formats. This is because one simple reason, the ease of consumption. This actually is the main reason why GIF became a popular format.
To Conclude, without a doubt GIF is one of the most widely used formats out there and it keeps growing. This is the reason why, as image4io we decided to support it. Therefore, addition to the aforementioned delivery options, we add one more to it and improving the delivery performance even further.
Resources:
· https://cloudinary.com/blog/evolution_of_img_gif_without_the_gif
· https://rigor.com/blog/optimizing-animated-gifs-with-html5-video/
· https://en.wikipedia.org/wiki/GIF
· https://semgeeks.com/empower/how-animated-gif-emails-can-increase-your-conversion-rates/
Top comments (0)