How to Speed up GIF Videos
The graphics interchange format, better known as GIF, has been around for longer than the World Wide Web itself. Thanks to their simplicity and widespread support, GIF files remain wildly popular despite the dozens of other image and video formats available today. That said, GIFs can drag down a web page's performance, especially if not optimized. Let's cover some ways to speed up GIF animations on your website and look at some alternative formats that you should consider.
Why speed up GIF animations?
GIFs were invented in 1987 as a way to transmit multiple images that share the same metadata in a single file. It was never meant to be an animation tool, yet people have been using it for that purpose for the past three decades. Although we now have several superior alternatives for displaying animations, people are comfortable with GIF, and GIF animations are still extremely easy to make.
That said, just because GIFs are easy to use doesn't make them ideal for websites. Even if you're happy with how your website is performing, you may not realize how much weight your GIFs are adding to each page. A GIF that lasts only a few seconds can be several megabytes in size, which means that visitors with slower internet connections could be looking at a blank page for a few seconds before it loads. If users have to wait longer for an animated GIF to load than the actual length of the animation, then they are likely to be disappointed and tempted to hit their browser's back button.
Why you should stop using static GIFs
While GIF animations still have some value, there is no reason to use GIFs for static images these days. If your website uses a lot of static GIF images, consider converting them to the PNG format to easily shave off 5-25 percent of each file's size. You should also think about supporting newer formats like WebP.
Ways to manually speed up GIF animations
If you only have a few GIF files that you're particularly attached to, then it may be worth the effort to try the following techniques. Each one can be done with the help of the online tool EzGIF.
1. Crop and resize
Smaller images load faster than big ones, so decreasing the dimensions of you GIFs can result in minor savings. Since animated GIFs are just collections of static GIF images, you'll have to edit each individual image to decrease the overall size of the animated file. Fortunately, there are plenty of free editing tools that streamline the process.
2. Trim the animation timeline
You may not necessarily need every frame of an animation. Use a GIF editing tool to eliminate some frames and lower the file size.
3. Lower the frame rate
If you don't want to manually remove frames, you can use an editing tool to automatically drop every second, third or fourth frame from an animation to reduce the file size.
4. Reduce the number of colors
Try decreasing the number of colors per frame. You can experiment with different options to find the best compromise between file size and image quality.
5. Experiment with transparency
Making parts of each frame transparent is an effective cost saving method for images with large unchanging areas, but it can ruin busier animations. Most GIF editing tools allow you to experiment with transparency settings.
Speed up GIF animations with compression tools
Due to their nature, it's not possible to make changes to GIF files without affecting their graphical data. In other words, optimizing your animated GIFs for speed often means sacrificing image quality. Fortunately, the human eye isn't very good at noticing subtle color differences, so your users might not even be able to tell the difference.
Although the term "lossy compression" carries a negative connotation, sometimes reducing the quality of an image is worth the performance boost. Running your GIFs through a compression tool like EzGIF can reduce their file sizes by 30-50 percent without affecting the visual quality too drastically.
Alternative formats to speed up GIF animations
If you have a lot of GIF files on your website, it might make more sense to convert them all to a more performant alternative. There is a debate among web developers whether or not animated image formats should be ditched altogether in favor of video formats. Fortunately, you have plenty of options regardless of your preference. Here are some alternatives to GIF to consider:
1. MP4 videos
Since the HTML5 video tag gave browsers the ability to play videos without the need for external plugins, MP4 has become the preferred multimedia container format of most web developers. Converting your animated GIFs to MP4 videos can make your files up to 95 percent smaller. Aside from their smaller file size, MP4 videos look better than other alternatives since the format was designed for streaming video. All modern browsers support MP4 videos, so now is an ideal time to convert those GIFs to MP4.
An easy way to do this is to use a solution like FFmpeg. With this tool you can run a simple command from your console to convert your GIF files to MP4 like so:
ffmpeg -f gif -i infile.gif outfile.mp4
2. APNG
An extension of the PNG format, APNG works similarly to GIF in that it acts as a container for multiple PNG files. However, APNG supports more colors and partial transparency, and it's compression algorithm is far superior. It's been around for over a decade is supported by most major browsers.
3. WebP
WebP uses a combination of lossy and lossless compression techniques to package images into the smallest possible size. Like APNG, it is supported by most modern browsers except IE and Safari.
4. Pure CSS
If you use simple animated GIFs for UI elements, consider replacing them with vector-based graphics. Shapes created using pure CSS are resolution-independent, so they can be scaled up without sacrificing quality.
Tools to speed up GIF animations
Here's a selection of tools that are helpful for compressing, editing and converting GIFs:
1. EzGIF
EzGIF is a web based solution featuring a wide selection of tools for editing, optimizing and converting images or videos to different formats. It also has a handy GIF maker tool so that you can create animations that are optimized from the get go.
2. ImageOptim
Exclusively for Mac, ImageOptim uses a compression algorithm that automatically decreases the dimensions of GIFs and JPGs to about 60-80 percent of their original size. It also removes unnecessary color profiles and excess metadata. The result is a smaller image and a smaller file.
3. FILEminimizer Pictures
FILEminimizer Pictures is a Windows program that gives you four different compression options so that you can find the perfect balance of image quality and size savings. It includes a handy feature that lets you directly upload GIFs to Facebook.
4. RIOT
The Radical Image Optimization Tool, or RIOT, gives you considerable control over the optimization process. It also features a dual view interface that lets you see a before-and-after comparison.
5. Convertio
Convertio is another conversion tool that supports hundreds of formats. It can also convert audio and video files, which makes it a great all-in-one solution for web developers.
GIFs and CDNs
Whether you plan on keeping your GIF files as-is, optimizing them, or converting them to another format, an easy way to speed up their delivery is by using a CDN. A CDN will pull the GIF files from your origin server and cache them. Therefore, the next time a user makes a request for that file it will be delivered from the nearest possible CDN edge server. This results in a reduction in distance travelled and therefore latency, as well as reduces the load on your origin server.
To learn more about integrating a CDN with your website, check out our extensive list of CDN integrations.
Summary
There is no sign of GIFs going away anytime soon, but serious web developers need to look ahead and embrace more efficient alternatives.
Of course, web optimization is always about weighing costs and benefits. Your time is a valuable resource, so before you start making changes, be realistic about the benefits to determine if its worth the investment. If your website suffers from general sluggishness, you should perform some analytics testing to determine if something else is causing the problem.