How Can I Enhance My Site’s Performance When Using Gifs?
Developed in 1987 by Steve Wilhite, GIFs were designed to enhance black-and-white images by using 256 colors while maintaining a compressed format that could be used by slow modems. Since GIFs are simple and are used to stream video clips, GIFs are still widely used today.
Optimizing for GIFs
While GIFs provide some information and are quite attention grabbing, GIFs weren’t originally designed for animation. GIFs actually create a slow load page and lead to heavy page weights.
You can optimize your GIFs by compressing them – there are two methods.
Lossy Compression: This method reduces the file size but every time you save the file after you’ve compressed it, you might get a fuzzy image.
Lossless Compression: All data is preserved from the original file so the image can actually be uncompressed. Your file will also be larger than if you used Lossy Compression. Also, the image quality won’t degrade.
You can also render your image using the PNG format which can be compressed to a size 5-25% smaller than the equivalent GIF. If you don’t want to go down that route, you can convert your GIF to an HTML5 Video which reduces the size by 95%. HTML5 allows users to play video content with the <video> tag without using external plugins.