More than any other type of digital asset, animated GIFs have won over online consumers’ hearts and minds. But gosh, optimising them is so difficult!
I once tried to adjust a GIF’s quality, frame rate, and length for an hour before giving up since I couldn’t reduce the file size below 2 MB without the GIF appearing terrible.
It’s understandable that websites like Giphy don’t even employ the GIF file format. They substitute HTML5 videos, which are frequently 90% lower in size.
What is animated gif?
On June 15, 1987, a group at the internet services provider CompuServe under the direction of American computer scientist Steve Wilhite created the Graphics Interchange Format (GIF), a bitmap picture format. Due to its broad support and compatibility between programmes and operating systems, it is widely used on the Internet.
Each image can reference a palette of up to 256 different colours drawn from the 24-bit RGB colour space thanks to the format’s capability for up to 8 bits per pixel. Additionally, it provides a different palette of up to 256 colours for each frame and supports animations.
Types of video format
There are many types of video formats. But we can discussedon some of these in below:
- MP4: A digital multimedia container format known as MPEG-4 Part 14 or MP4 is most frequently used to store video and audio, but it can also be used to store other types of data including subtitles and still photos. It supports online streaming, just like the majority of contemporary container formats.
- WebM: WebM is a file format for audiovisual media. It is primarily meant to provide a royalty-free substitute for use in HTML5 audio and video elements. It has a companion project for photos called WebP.
Replace the Gif img to video
A video must reproduce three essential characteristics of animated GIFs:
- They start up on their own.
- They keep looping (usually, but it is possible to prevent looping).
- They remain quiet.
Fortunately, the <video> element allows you to duplicate these features.
<video autoplay loop muted playsinline></video>
When a <video> element has these characteristics, it automatically starts playing, loops indefinitely, plays without music, and plays inline (rather than full screen), which are all characteristics of animated GIFs.
Finally, depending on the browser’s compatibility for the format, the <video> element needs one or more source> child elements linking to various video files. Provide both WebM and MP4 so that a browser can fall back to MP4 in the event that WebM isn’t supported.
<video autoplay loop muted playsinline>
<source src=“my-animation.webm“ type=“video/webm“>
<source src=“my-animation.mp4“ type=“video/mp4“>
</video>
When a <video> element has these characteristics, it automatically starts playing, loops indefinitely, plays without music, and plays inline (rather than full screen), which are all characteristics of animated GIFs.
Finally, depending on the browser’s compatibility for the format, the <video> element needs one or more source> child elements linking to various video files. Provide both WebM and MP4 so that a browser can fall back to MP4 in the event that WebM isn’t supported.
This has been a guide to On Page SEO. You may also have a look at the following articles to learn more –
