Improving Site Performance When Using GIFs

GIFs are he 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 webpages and lead to poor user experience. As such it's important to consider serious optimization of static and animated GIFs or moving away from using animated GIFs.

Here are some ways we can continue using GIFs while enhancing the performance of the webpage.

(A) Non-animated/Static GIF File

1. Lossy Compression: In this method, the GIF file is compressed in size with some loss in resolution data. Human eye may not be able to easily discern the changes, but the file size could be 60 to 70% smaller. There are popular tools such as gifsickle can help with the file conversion (http://www.creativebloq.com/design/image-compression-tools-1132865)
2. Non-Lossy Compression: In this technique, GIF file is converted into PNG file which are about 5-25% smaller than equivalent GIF file. Tools such as Pic.io and Convertio can help with converting GIF format files to PNG format files.

(B) Animated GIF File

1. Lossy Compression: In case of animated GIFs, tools such as gifsickle uses lossy encoder to encode and compress near matches of pixel arrangement of data to create "near perfect" image frames inside the GIF animation. Since our human eye does a very good job at not being able to distinguish subtle changes in color, this alternative works in many cases.
2. Non-Lossy Compression: When losing resolution will not work, it's best to convert the GIFs into HTML5 video format, which results in 95% smaller file size. With the <video> tag, modern browsers can play HTML5 video without needing to download external plugins. HTML5 videos are stored in MP4 container files, and there are several tools such as ffmpeg and the web-based Cloud Convert to convert GIF animations into HTML5 videos.