The GIF (Graphics Interchange Format) format was originally developed in 1987. Debuted by Steve Wilhite of Compuserve, GIFs improved on the black-and-white images in use during that time by allowing the use of 256 colors while maintaining a compressed format that could still be loaded by those utilizing slow modems. Furthermore, web developers and designers could create animations via timed delays. And to this day, little has changed regarding GIFs.
Due to its simplicity, the widespread support for this format, and the ease with which it can be used to stream video clips, the GIF format is the oldest file format still commonly used today. This frame animation feature of GIFs ensures that the format remains popular, despite the rise of JPEG and PNG images.
In spite of their popularity and ubiquitousness on the Internet (especially with regards to animated GIFs), GIFs are not the most performant of image options. If you are using GIFs on your sites, it’s important that you take care to optimize your GIFs so that they do not create too much overhead.
This article will cover ways to optimize your GIFs, both static and animated, and will offer an excellent alternative you can use to eliminate the page bloat resulting from use of GIFs as animation.
Why should you optimize your GIFs?
Performance matters when it comes to designing your web pages, and GIFs are not the most performant of image options. While they are excellent for capturing your user’s attention and are universally liked for providing short bursts of information in an entertaining way, GIFs were not designed for animation (despite them being commonly used for such). As such, usage of GIFs leads to heavy page weights and poor user experiences resulting from slow page load speeds.
How to improve the performance of your site while using GIFs
In this section, we'll cover several ways you can improve the performance of your site with regards to using GIFs. We'll first dig into ways to handle static GIFs, and we'll end by discussing ways to minimize the overhead resulting from animated GIFs.
There are two methods for compressing images:
One of the primary methods for optimizing GIFs is to compress them. There are two methods of compression that are commonly used:
- Lossy compression: Lossy compression removes some of the data from the original file, resulting in an image with a reduced file size. However, every time you save the file after compression, the quality of the graphic degrades somewhat, which can result in a fuzzy, pixelated image over time.
- Lossless compression: Lossless compression preserves all of the data from the original file, which means that the compressed file can be uncompressed to gain the original file. While your file size remains larger than if you had used lossy compression, your image’s quality does not degrade over time.
Later on in this post, we'll cover the impact of both types of optimization on GIFs.
Improve the performance of sites that are using static GIFs by converting to PNG.
The easiest way to improve the performance of your site is to render your image using the PNG format instead of the GIF format. While the two formats are very similar in terms of being good choices for displaying simple graphics, PNG files have the advantage of being able to compress to a size 5–25% smaller than the equivalent GIF file. GIFs were originally created to use a lossless compression technique called the Lempel-Ziv-Welch (LZW) algorithm, which was defined in the 1970s. However, modern compression techniques are much more performant than LZW, and you can take advantage of this by using formats that utilize these techniques, such as PNGs.
Such file format conversions are pretty easy to do, and there are an abundance of software options you can choose from, including free web-based utilities such as the ones from Pic.io and Convertio.
Improve the performance of sites that are using animated GIFs one of two ways:
Animated GIFs, while extremely popular, can be huge files that require lengthy load times. For example, a GIF that is just a few seconds long can be a few megabytes in size. To improve the performance of your site, use one of the following techniques:
- Lossy optimization
- Converting your animated GIF to a HTML5 video
Lossy optimization on animated GIFs
Because the vast majority of data comprising animated GIFs is graphical data, and because lossless optimizations cannot modify graphical data, you have only one viable option when it comes to optimizing an animated GIF beyond the bare minimum: lossy optimization techniques.
Lossy optimizations work because the human eye does not do a very good job at distinguishing between subtle changes in color. For example, an image might contain thousands of shades of one color, with one pixel showing as only slightly different from the ones next to it. Because your eye won’t be able to differentiate between the two shades, the image file can easily be manipulated: One of the colors replaces the other, making the file smaller.
Because animated GIFs are essentially a series of individual GIFs, you can utilize these techniques to decrease the size of your animated file. By making each individual file smaller, your overall file is smaller as well. One way you can do this is by utilizing a simple software suite that can automatically perform such compressions (such as a modified version of gifsicle).
Converting animated GIFs to HTML5 videos
While you can minimize the size of an animated GIF, you may still end up with a file that is larger than it needs to be. GIFs were never intended to store video, and what is now considered animation is really the result of an attempt to reduce overhead on the storage and transmission of multiple images that share identical metadata. Today, however, we have another option that could potentially make your GIFs up to 95% smaller: converting your animated GIFs to HTML5 video.
HTML5 video is a catch-all term for a modern web browser’s ability to play video content using the <video> tag without needing to use external plugins. When this feature was first released in 2009, there was a lot of debate over how such videos would be stored and how they would be encoded. Today, though, the accepted standard is an H.264-encoded video stored in an MP4 container file (which, for simplicity’s sake, we'll refer to as an MP4 video from here on out). In addition to looking a lot better due to its being designed to stream video, MP4 files are much smaller as well:
Over 90% of modern web browsers support MP4 videos.
There are many ways to convert your animated GIF to MP4, such as the popular open-source command-line tool ffmpeg and the web-based utility Cloud Convert. Using the latter, you can see the file size savings possible by making the conversion.
Here's the original animated GIF:
Here is the MP4 video that's created from the GIF:
Looking at the sizes of the files, we see that the original was 100 KB. By converting the GIF to MP4, we end up with a file that is just 23 KB, which is 75% smaller:
Conclusion
GIFs are the oldest file format still commonly used today due to their simplicity, near-universal support, and ability to be used as animation. Despite these positive features, GIFs tend to be large files, resulting in page bloat that can negatively impact the performance of your webpages and lead to poor user experiences. As such, you should consider serious optimization of static GIFs, moving away from animated GIFs, and implementing video clips using more modern techniques such as HTML5/MP4 videos. And for additional in-depth information on implementing these changes, download Rigor’s free ebook, The Book of GIF: A Comprehensive Guide to Optimizing GIFs.
Has anyone heavily featured GIFs on their website and measured the added latency that those GIFs add to the end-user experience?
Lattency is only part of problem. Much bigger problem is memory footprint and CPU usage (this became later battery problem too).
GIFs comes with linear file structure and every frame is decoded as-is as full frame (no delta compression). Also there wasn't "hints" where each image is (in animated GIFs). This result huge lagging in real world.
MP4 is also with linear structure but frames are as - full frame, delta, delta, delta, delta, delta, etc, etc, full frame, delta, delta, delta. The compression advantages here comes only from that "delta" storage between frames. And you can control on what period you should put full frame in stream. Second improvement is "hints" - in MP4 you can jump to specific time and start playing from there.
And MP4 (H264) is "old" standard. You also can include WebM because files there are smaller in size with least 20-30%.
Anyway - topic is interesting and can be very boring when you implementing it about details. For example - desktop browsers missing support for HTTP Live Streaming (HLS).
Unable to view video version using chrome browser.
Hi Chapman!
Thanks for this post, I use lots of GIFs on my blog post and I didn't think about converting it to .mp4, I'm going to try it right now! :)
Me too Sergio! I use a lot of GIFs from Giphy (for example).
Now I'm going to use the 'video' tag that Giphy use for their HTML5 video option in the Advanced tab on every GIF.
Great post Chapman!
Hi Ruben and Sergio,
I am working with html5 video option too now.
thanks champan
Useful stuff, thanks. It's always nice to get some refreshing information on something that you thought wasn't an issue.
I'd like to share one more thing. Imgur has own format for .gif optimization, it's called ,gifv
It has a great conversion rate, in their press release they claim something like 50Mb to 3.5Mb and it keeps the quality incredibly well. example: https://i.imgur.com/l0XdE9y.gifv (4Mb from 18.4 in .gif format, quality didn't change)and you can access the regular gif file after uploading by changing the url from imgur.com/l0XdE9y.gifv to imgur.com/l0XdE9y.gif
They appear to just be embedding an mp4 and calling it a "new format". View the source of the element.
I noticed that, but I assume it's their compression process that is new. And if not, it's good because it's easier than converting it yourself, unless you need to convert them in bulk.
Oh yeah, the quality is very nice :D. Although, I always like to host the animated gifs on my sites. Currently looking for an all in one solution for compressing png, jpg and gifs. But I will try imgur for some :)
Good stuff Igor thanks for sharing, that's really good to know pal.
You taught me a new word - performant aka efficient.
@Chapman It's also important to note that not all gifs are created equal. I've seen gifs that were created using extremely high quality video as their root source. The way a gif is created and that source file matters greatly since there are a lot of applications that will make a gif for someone but don't always allow you to adjust things such as frame rate/quantity. As a result gifs end up having a massive quantity of frames. I like to go back to photoshop to handle this and delete out near duplicate frames and adjust the frame display rate.
As an interesting tidbit - the amount of time a gif takes from start to finish doesn't change it's file size. The only thing that changes it's file size is the quantity and quality of the frames & obviously dimensions. Thus, you can often get the same effect and play time with less frames but have them display longer.
Thank you very much, Chapman! It's a really interesting info. I really like GIFs but I didn't know this similar but better options. Nice post! :)
Excellent article, I do love to use animated GIFs, it's so easy to do it now that Camtasia Studio added support for it. Also, if you use after effects and want to export to GIF, instead of exporting to video and then editing on Photoshop, you can just use this plugin https://goo.gl/coa3F0.
Very helpful post and one I've bookmarked for later! One other way you could optimize delivery is by creating the animated GIF in different sizes. Then you can serve the best (smallest) version based on the device viewing it using the SRCSET attribute.
This is an excellent idea!
Hello Chapman, Thank you for the blog, it is very interesting for me to know how to optimize GIFs and how to improve the performance of the website with GIFs. I knew the PNG format but did not know lossy or lossless compression and MP4 files. Thank you and god job!
Great article Chapman,
One thing that wasn't mentioned was to not make them download immediately on page load. Instead, add click to play functionality so the user only downloads the full animation when necessary. This would obviously depend on the type of content you have.
I used this method on an article I published a few months ago. It's a great solution when you've got lots of gifs that are optional to watch.
That's a good point JD.
Thanks for the article. Question for you: Why do you recommend converting static GIFs into PNG rather than JPG? Wouldn't the JPG have a smaller footprint than the equivalent PNG?
GIF can be easy converted to PNG-8. If you have less colors you can use only 16 colors (4 bits), 32 colors (5 bits), etc. Some images - like diagrams, infographics, etc can take advantages from PNG compression. Other like photo images can take advantage from JPG compression. That why you actual should test size in apps before exporting image.
Post pngs can be quantized with extremely minor pixel shifting, too. Tools like pngquant or the online webapp TinyPng are great for this.
I prefer to just stick with JPEG's, I haven't necessarily had a problem with those. It makes sense to use gif if it's animated though.
I am in love with the gifs, both in blog articles and in social networks. They give freshness to the contents and make them more enjoyable when it comes to reading.
Maybe the problem is the weight, but it seems to me a thing of the past, as Ruben Alonso has commented, in Giphy you have many ways to get the gifs.
Regards!
Nice idea on converting animated gifs to mp4.
Great article! I´ve been working on the compression of my site and this was one of my main problems, since Google is taking it into serious consideration lately. Lots of work to do on all them since I use loads of them! I´ve also notice that pages with animated GIFs do have less average time per session, bounce rate is more or less the same in all of them, quite high :s
Thanks for sharing!
This is something new i learned today. I am looking forward to use MP4 in my blogs and hope to get positive results.
Nice post, Chapman!
With its huge increase in popularity, many businesses and brands have been carelessly throwing gifs on their sites and social media platforms just to keep up with the trend. I appreciate how this article breaks down the technicality of gifs and includes ways to optimally use them.
Great post !!!! I have never used gifs in my blog but after read this I´ve got to do it... thanks!
Very interesting and when passing from gif to mp4 has been reduced by 75% its weight and the image is almost the same, I will try it, thank you very much for this valuable contribution was very entertaining
Very Good Article,
You saved my day's long efforts to handle Gif files. For me Gif files make my website a lot messy and that's why i am not using them. By these tricks, I think its easy for us to use more graphical content in modern websites.
BTW Thanks Alot
According to me Gif only distracting attention of users from main content. Gif is not a smart idea if its playing without user permission , so even if any webmaster use this then they must give option to that user to play only when they want to play .Today gif is used by advertises in facebook to grab user attention, but in blogs/articles i think content is the only thing that grab user attention.
ALT tag with low size GIF images can help to improve your site performence.
Converting GIFs to html 5 or mp4 does save a lot of loading time. A compressed GIF file enhances user experience and adds to mobile responsiveness. This is vital for your SEO. An optimal combination of GIFs and mp4 should do the trick.
Interesting that when I read the article in gmail the html5 video doesn't show instead it says "sadly your browser doesn't support the video tag, but it shows fine if you click the link to view on moz instead.
Helpful article. I've been using GIFs from GIPHY on one of my sites. While they look great, they do slow down the site considerably. Thanks for sharing the tips here! Will definitely optimize the GIFs on my site!
The elephant in the room here is autoplay. The only good reason to use GIFs in 2016/17 is to play and loop an animation with zero interaction needed from the user. An MP4 can accomplish that easily on desktop, but good luck getting it to autoplay naturally on mobile devices. Animated PNGs (APNG) may be a good solution for filesize if they ever get supported in Chrome and Edge. Until then, however, I think we're stuck with optimizing GIFs as well as possible.
Thanks a lot!! Seriously I need this at the moment to improve my site performance.
if you have any questions, let me know I can help ya.
In the past I've used www.compress.io to compress images. I'll definitely check out the MP4 approach!
Good article. Sites need to optimize all images.
It's gotten to the point that I just close an article when I see a giant gif start loading on the page. Not only are they often 10+ MB each, but they make articles much harder to read with a constantly looping animation in your peripheral vision. It's very distracting.
The solution of using video files is better, but you're now taking a source video - converting it to a gif - and then converting it back to a video. All you're going to end up with is an extremely dithered video with janky key frames. Link or embed the original video instead.
Really, just don't use gifs. They were never designed for video content, and there's better options for any and every type of content.
That was the great and Insightful article!!
I have added GIFs on my website, but haven't yet noticed the end-user experience.
You are not alone @Nisha, we are in the same boat.
Anyways, you nailed it Chapman, great work done. This blog came to the right time for me specially because since a month I was using GIF images more instead of simple PNG images and I did work out good. I have noticed some improvement in avg time session by visitors and less bounce rates (May be due to interesting GIF's) .
I believe this information could help many out there. Thanks man, good luck !
Good article. every website need to optimize all images or responsible with mobile browser. now a day google give more priorities to mobile supported and high resolution images.
Very good post, clarifies some elements that were not clear at all. By the way very good the subject of Converting animated GIFs to HTML5 videos.
Regards
I have never used gifs in my articles but it seems like a good idea.
Thanks also for the tip to convert them to mp4.
Greetings.
I have created GIFs using SnagIT App, Normally the GIF is about ~200KB which is not that good format. This blog post is pretty useful for me, thanks :)
Oh wow... gif -- > mp4 ... why didn't I think of that. I now have that guilty feeling that I need to go an update my blog to pull out any animated gifs and convert to mp4.
It depends how many gifts you have, you'll have a lot if it's a pretty big site.
Excellent. Now my website can speed up. Mp4 approach is best. thank u.
Most of blogger avoid using gifs due as seo gets affected or uses only when its quite necessary!
It's very minimal though, but of course, it's not worth having a gif on your site if it affects performance.