Among the many ways to put graphics into web pages, GIF (Graphic Interchange Format) is probably one of the best known to provide animations. The format is a bitmap image that was first developed by Steve Wilhite in 1987. Since then, its usage has come into a widespread due to its support and portability.
The bitmap format allows a single image to reference to its own color palette, up to 256 chosen from the 24-bit RGB color space. As a result, GIF images are limited and less suitable to reproduce color photographs or images with continuous colors, but can be a good choice for simpler images.
Due to its simplicity, the format has a widespread support and the ease with which it can be used to stream video clips. As one of the oldest format, it is still common for files used for the web. Its frame animation feature made the format remains popular, despite the rise of JPEG and PNG images.
But as popular as it can be, GIF files tend to be larger in size. And this is a problem for websites.
While GIF images are compressed using Lempel–Ziv–Welch (LZW) lossless data compression technique patented in 1985. But controversy over the licensing agreement between the software patent holder, Unisys, and CompuServe in 1994 spurred the development of the PNG standard.
By 2004 all the relevant patents had expired.
Why Optimize GIFs?
On the web, speed matters. And when it comes to images and animations, GIF file formats are not designed for performance. While they are indeed great for capturing attention with the short burst of information in an entertaining way, GIFs weren't initially designed for animations despite being commonly used for such.
For this reason, GIFs tend to be larger in size. And when the file format is used for images on the web, it can put a heavy weight to a page resulting poor web loading performance.
To make GIF files smaller in size, there are two optimization methods:
- Lossy compression: This removes some of the data from the original file. The result is a reduced file size, and a reduced quality. The result image can be fuzzy and pixelated over time.
- Lossless compression: This reserves all of the data from the original file. While the file size remains larger than than lossy compression, the image's quality does not degrade over time.
If those two methods aren't sufficient, GIF images can be converted to other file formats.
Converting GIFs To Other File Formats
The easiest alternative for static GIF images is to covert them to PNGs. While the two formats are very similar in terms of choices for displaying simple graphics, PNG has the advantage for being able to compress to up to 25 percent smaller than an equivalent GIF file.
GIFs were originally created to use a lossless compression technique with the LZW algorithm. But as tech evolves, modern compression techniques can compress images much better than LZW. And PNGs can use those compression methods more effectively.
For animated GIF files, HTML5 videos or MP4 can be used.
GIFs weren't initially designed to store videos. And as a result for such attempt, they will have a large overhead on the storage and transmission. By converting animated GIFs to HTML5 or MP4, the file size can be reduced to up to 95 percent smaller.
HTML5 and MP4 are an advantage because most modern web browsers are having the ability to play video contents using the video tag without needing any external plugins.
Furthermore, video element in the HTML5 specification, comes along with the H.264 and WebM video file formats which allowed broader support and easier implementation of videos, making video alternatives for GIFs more practical.
For web pages that use GIFs for simple lines or shapes, vector-based graphics such as SVG or pure CSS can often be a better solution than a raster-based format like GIF or even PNG.
Conclusion
GIFs are the oldest file format, but still commonly used due to their simplicity, animation ability and near-universal support. With the advantages of GIFs, they come with drawbacks. Mainly, its the size that matters.
GIFs tend to be large files. And on the web where speed matters, the files can bloat web pages impacting performance. So whenever possible, GIFs can be compressed to be smaller in size. Another option is to convert them to the appropriate format.
PNGs can be a great alternative for static GIFs while HTML5/MP4 that are considered more modern techniques, are more suited for alternatives to animated GIFs. Simple graphics such as lines or shapes can also be made using SVG or pure CSS. These are more robust and smaller in size.