Elements to Keep in Mind When Optimizing GIFs
by Federica Rustico
14 min read
Last Updated: May 26, 2023
by Federica Rustico
As human beings, we’re always leaning towards cutting-edge innovations. We always want whatever is the latest of things. This applies to pretty much every aspect of our lives, from education to technology. But nobody can blame us, technological advancements typically provide superior functionality, user experience, and feature enhancements. We can automate processes, cut expenses, increase productivity, and maintain our competitive edge with the help of today's technological improvements. But that doesn’t mean we should just set aside older tech, at least not completely.
In fact, we should find ways to leverage older tech and readapt it to today’s needs. And speaking from a marketing perspective, despite their invention in the late ‘80s, GIFs have proved themselves to become an interesting image format that can be readapted to meet today’s ever-changing marketing landscape, tackling problems like consumers’ reduced attention spans and offering fresh and entertaining ways to engage with audiences on social media and websites. It's true that GIFs were stigmatized as childish and tacky in the context of online design in the early 2000s, when the trend toward minimalism took hold across the internet. In spite of this, GIFs have made a significant resurgence, in no small part due to the widespread availability of third-party GIF integrations such as Giphy and Tenor and partnership with social media companies. This has resulted in GIFs being used to express feelings and emotions by consumers and as a digital marketing tool to humanize companies by businesses. So if you're using GIFs in your marketing strategy good for you. The next step is to make sure you're optimizing your GIFs. Here are the elements to keep in mind to make sure your GIFs are both running smoothly and aren't too heavy.
But any discussion on best practices need some context for the many pieces of the puzzle to fit together smoothly. Although GIFs (Graphics Interchange Format) are ubiquitous on the internet today, you might be shocked to learn that they actually predate the World Wide Web by two years. Yup, that’s right. In 1987, CompuServe was the first to use the GIF, and in 1989, Tim Berners-Lee, a computer scientist, created the World Wide Web. The.gif file extension was the first to solve the problem of lossless image compression. The GIF format was developed to facilitate the distribution of lower-resolution still images, but its ability to be used to make animated images was a major breakthrough. GIFs resemble flip books more than videos. Instead of showing each individual frame, an animated GIF displays an entire sequence of them in a single, continuous image (similar to a flip book!). Animated GIFs are now commonly used on any medium you can think of: social media, email marketing, banner ads, and a whole lot more.
When a picture is encoded in GIF, meaning it has an 8-bit color palette, the image is compressed without losing quality. The quantization that comes with lossy compression means that details will be lost if the source image is a full color image such as a 24-bit PNG. The process is identical when a video is converted to an animated GIF.
Every discussion on GIF creation revolves around the same central theme: striking a good balance between exporting a tiny GIF file size and the "best you can work with" GIF quality. Unfortunately, this problem does not have a simple answer or universal equalization. For this reason, we should adhere to a set of GIF best practices, as much as possible. How you modify these procedures depends heavily on the target audience for your animated GIF. A few things should be kept in mind:
It's true that the optimal GIF size will change depending on the file you're exporting, however there are four constants when it comes to GIF optimization:
It's simple to fine-tune these four GIF specifications due to their adaptability, especially if you already know the best practices for optimizing GIFs before you begin designing. Exporting a GIF that has already been optimized saves time and effort over learning how to modify a GIF in post-production.
In most cases, the quality of the animated GIF will suffer significantly when using a third-party GIF optimizer/compressor. The little amount of input you have with this type of GIF optimization comes down to a list of available optimization techniques for GIF files. There is no problem with fine-tuning motion graphics in post-production, but if you want to obtain a good grasp on how to reduce GIF file size and increase GIF quality, you've come to the right place!
The first thing you can do is to make sure that your canvas is set up correctly from the start to accommodate the GIF format. In the context of media files, resolution is a measurement of size in terms of the number of pixels used to display an image or video. When exporting a GIF, a larger canvas will nearly always result in a larger than usual size, regardless of the aspect ratio you're using.
In case you didn't know, GIF files are compressed using LZW lossless compression, so the size you end up with depends on the canvas size you chose and the intricacy of your animated images. Exporting the same animation to more modern picture file formats like APNG or WebP could reduce its file size and load time. So, it's just a matter of accounting for the GIF's built-in quirks.
Normal GIFs have a 640-by-480-pixel resolution (4:3). Some websites recommend a maximum size of 1200 x 900 pixels for images, while others recommend a maximum width of 500 pixels for GIFs. Avoid the hassle of learning how to crop a GIF with little detail loss by sticking to the size restriction guidelines of the GIF animation's final destination.
When it comes to optimizing GIFs, altering the framerate is the next best thing. But let’s go back to planet Earth for one sec, what are frames, exactly? Frames, when discussing GIFs, are the individual images shown one after another to produce a moving GIF. When all the individual frames are put together, it gives the impression of motion. Changing the framerate allows you to change how quickly each frame is displayed, which results in more fluid and lifelike animations.
Frame rate best practices for uploading to GIF search engines like Giphy are between 15 and 24 frames per second, and there should be no more than 200 or 100 frames in the entire GIF. However, keep in mind that you can get away with a lot less and still have a GIF that runs pretty smoothly.
When time is of the essence and you need to figure out how to reduce GIF file size quickly, the simplest GIF optimization approach is to reduce the frame rate at which your animation plays. Total exported frames are proportional to the frame rate used for rendering. The GIF file size for a 10-second animation at 12fps (120 frames total) is significantly smaller than the GIF file size for the same animation at 30fps (300 frames total).
If you're making an animated GIF, you might have to take into account the platform's default framerate settings. Although the framerate and resolution of a GIF may be fixed, the image can still be optimized in other ways.
A GIF's length must be just right so that each iteration flows seamlessly into the next. Short animations are ideal for this format because of the compression benefits of the GIF file type. For instance, Giphy suggests no more than 6 seconds and would not accept uploads of more than 15 seconds in length. You can reduce the size of a lengthy animation GIF by simply increasing or decreasing the frame rate.
To either speed up or slow down an animation, you can utilize GIF editor tools, which often have preset parameters like x0.25, x1.5, x2, etc. In other words, if you speed up your GIF by 200%, it will play in only 5% of the time it would have otherwise. If you take a 10 second GIF and speed it up by 200%, you'll end up with 150 frames; if you slow it down to 5 seconds, you'll have 300.
You can export a smaller, lighter file by reducing the GIF's duration and total number of frames without compromising on framerate or sharpness. I mean, how cool is that?
When compared to other image file formats that can store over 16 million colors, the GIF format's limitation of 256 colors per frame seems somewhat limited. In spite of the GIF color restriction, the number of colors used in a single animated graphic can significantly increase the file size. As we mentioned earlier, images in GIFs are compressed using Lempel-Ziv-Welch, a lossless compression method (LZW). By using this form of compression, the GIF file size can be decreased without compromising image quality. To decrease the amount of data that must be saved, LZW looks for patterns in the data and replaces them with shorter sequences of code. Since the GIF format uses lossless compression, all of the pixel data for each individual frame is preserved. This means the size of the final GIF file is proportional to the number of frames and the number of colors used. So it's quite easy to make a GIF run faster by restricting the number of colors it can use.
But hold on a sec. It's a common mistake to think that graphics should only employ a small palette of colors. Even if you’re just making use of the colors yellow, dark yellow, blue-black, and white, exporting with only four colors might cause low contrast colors to be lost and cause edges to look pixelated. Anti-aliasing (also known as preventing the raster artifact around sharp edges) is a technique used to make pixel-based graphics appear seamless, although it requires more colors than are available.
Inputting any number of colors is usually possible in design programs (most common presets are: 8, 16, 32, 64, 128, and 256 colors). Animated GIFs can be created with as few as 8 colors, however this limitation should be taken into account during the design process. If you want to maintain a respectable degree of GIF quality while using only 8 colors, you should:
Following these guidelines, you should have no trouble making your animated GIF as compact as possible without sacrificing quality.
There are good reasons why the size of animated GIF files is the primary focus of GIF developers. When pages take too long to load, visitors lose interest, search engine optimization suffers, and email marketing campaigns fail. Given the stakes, it's easy to let size optimization trump the greatest methods we have for maximizing GIF quality.
Over optimizing a GIF file size might result in subpar GIF quality, as you might imagine. After that moment, no amount of hints and techniques can help you fix the GIF. This is why the golden rule of GIF optimization is to only reduce the quality of the animated picture to the point where the reduced resolution, framerate, duration, and color depth are still suitable for the intended usage (i.e., you can get away with lower quality for a GIF displayed on Whatsapp vs. one meant for a landing page). Improving the quality of a GIF is even less complicated than making it less in file size. Modifying just two options yields a noticeable quality boost to GIFs.
Every pixel in a GIF must be either completely transparent or completely opaque; the format does not allow for semi-transparency. A GIF exported with a transparent background will have jagged pixelated edges when placed on most backgrounds. The overall quality of your animated GIFs may suffer due to this visual flaw. Once noticed, this flaw cannot be overlooked.
But the good news is that this annoying shortcoming of transparent GIFs can be easily remedied. If you have white jagged edges, edge matting will make them far less obvious. With this option enabled, the backdrop color will mix with the edge color of your moving graphics.
The "Matte color" function allows you to choose a color to make your canvas look matte, however white or the canvas color are the defaults. There is a definite advantage to knowing the color of the background that your transparent animated GIF will be added to. Transparent GIFs can look messy on any background, but with some careful edge matting, you can make them look great on their intended color, or at least passable on a similar color.
Make a mental note that the matte color will be combined with the GIF's transparency gradients. As a result, it will be discernible not only along the margins but also beneath any element whose opacity is less than 100%. In order to reduce fringing and the halo effect around the edges of the visuals, set the matte color to one of the colors used in your animation.
Remember how we were saying that you can only use up to 256 colors per frame in a GIF? It may seem like a lot, but it’s actually not. This limit actually causes a flaw called “color banding”. In other words, due to the inability to create a full range of shades and tints, the images used in your GIF could have a series of stripes or bands, caused by the limited amount of colors available in the image’s color palette. This can hinder the quality of the viewing experience by producing an image that doesn't look natural or smooth. That’s when GIF dithering comes to the rescue!
Dithering is a technique used to reduce the visibility of color banding. It works by adding more color shades to the image, which helps to reduce the visibility of the color bands. By bringing together pixels of two colors, the technique can identify the brightness of a third color. When working with a limited color palette, gradients, or true-color images in the creation of mixed-media GIFs (vectors + PNG), this GIF quality enhancement measure is invaluable. Backgrounds, flat images, and other big sections of uniform color in a GIF don't need dithering.
Some design programs allow you to adjust the dithering intensity. Remember that increasing the dithering percentage can greatly improve the color quality of your GIF, but will also increase the size of your.gif file.
Another aspect to keep in mind is GIF direction, a.k.a. the viewing direction of an animated GIF. In case you didn’t know, GIFs can be set to animate in either a vertical or horizontal direction. Because of the potential impact on the animation's rhythm and effect, this is an essential consideration throughout the design phase. The good news is that changing the GIF's direction has no effect on the file size or quality, but it is a fun option to play with for its myriad visual effects.
There are four possible GIF motion directions:
Alternate and Alternate Reverse can only be selected if the iterations parameter is set to "Infinite" or a count larger than 1. If you want your GIF to play like a boomerang, you need to change the direction it is being played in to "Alternate."
To wrap up, GIF optimization starts from the design process. You need to be aware of the GIF’s intended use from the very beginning. Plus, making a GIF calls for familiarity with both the GIF format and the quality/size tradeoffs that are inherent to GIFs. Finding the sweet spot between a GIF's quality and file size is an iterative process, but there are several best practices you can follow to increase the likelihood of a positive outcome. The trick is to locate an optimal trade-off between quality, file size, color and frame rate that serves your needs.
Reducing the size of a GIF without losing quality can be achieved by optimizing the resolution and color palette of the GIF. When creating a GIF, you should start by selecting a resolution that is appropriate for the network/platform the GIF is going to play on. Additionally, you should select an appropriate color palette to ensure the GIF looks as good as possible while maintaining a small file size. Finally, you should consider using a type of lossless compression such as Lempel-Ziv-Welch (LZW) to reduce the file size even further without sacrificing quality.
If your GIF file is too large, there are a few methods you can employ to reduce its size. First, you should consider optimizing the resolution and color palette of the GIF. Additionally, you can use a type of lossless compression such as Lempel-Ziv-Welch (LZW) to reduce the file size further without sacrificing quality. Finally, you should consider using a GIF optimization tool to trim down the file size even more. With the right combination of these methods, you should be able to reduce the file size of your GIF without significantly sacrificing quality.
The best GIF resolution depends on the network/platform the GIF is going to play on. Generally speaking, if the GIF is going to be played on the web, the recommended resolution is 72 dpi. However, for GIFs that are going to be played on social media, a resolution of 150 dpi is recommended. For maximum compatibility, you should also consider using a resolution of 96 dpi, as this is the default resolution for most web browsers.
