However, there are options for lossy compressions as well. So, there are some optimisations we can make to the GIF itself to make it more performant.Īs I mentioned, GIF compression algorithm is lossless. For example, when this blog post is delivered as an HTML email, an actual GIF has to be used. In some cases, because HTML5 Video doesn't work everywhere, we can't get around having to use an actual GIF. Or, if you use Cloudinary, you can just change the file extension from. To convert a GIF to WebM, we can use CloudConvert. This will give us a video that's much smaller in size, at only 1MB ??! To replace the GIF from the introduction to this article, we can use the following video element.
#Gifsicle lossy mp4#
Surprisingly, the lossless compression algorithm used on GIFs is so unoptimised that video formats such as MP4 or WebM will provide a smaller file size than GIF images. To solve the performance problem of GIFs on the web, there are a couple of things we can do. This means that, during compression, no information is lost in the image at all, which of course results in a larger file size. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm. Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. However, a problem with this is that GIFs are heavy, the one above is a whopping 11.4 MB ? (NB: not exactly the image above, I couldn't actually load that on a page). For example, this GIF from my article on "Recreating the iTunes Library". I like to use them in my articles to illustrate functionality.