Believe it or not, GIF turned 35 this year! In the digital era, this is as close to “senior citizen” status as it gets. At the pace that graphic media is currently changing and cycling through trends, it’s impressive to see GIFs not only keep up, but over-deliver in usability, despite the performance concerns they raise. Read on to see how industry professionals are working with GIFs in 2022 – from GIF best practices, to tips on how to improve GIF quality!
Table of contents:
- GIF Origin Story
- GIF Best Practices
- GIF Optimization
- GIF Resolution
- GIF Framerate
- GIF Speed/Duration
- GIF Colors
- How to Enhance GIF Quality
- GIF Transparency
- GIF Dithering
- GIF Direction
- GIF Stickers
- GIF Benefits and Disadvantages
- Future of GIF
Now, don’t be mistaken – being a digital-elder does have its perks! One of the pillars that GIF’s longevity stands on is the close-to-universal support it has as a web image format. As the web moved into its pursuit of minimalism in the early 2000’s, GIFs did get a bad rep, and were seen as juvenile and tacky in terms of web design. Despite that, GIF has made a strong comeback, in part thanks to easily accessible third-party GIF integrations like Giphy and Tenor.
GIF is now on two main use spectrums:
1. Social tool to react/express emotions, either in the comment section of a viral tweet or in the private group chat of an instant messaging app.
2. Digital marketing tool suitable for use on social media, the company website, in email marketing, in prototyping platforms, or in “meme format” as a way to help humanize brands.
GIF Origin Story
Best practices, GIF-centered or not, need a bit of backstory so all the information easily snaps into place. GIFs are very much a part of internet culture, but you might be surprised to find out that GIF (Graphics Interchange Format) predates the World Wide Web by 2 years. CompuServe introduced the GIF in 1987, and computer scientist Tim Berners-Lee invented the World Wide Web in 1989.
The .gif image file extension was the first solution to allow compression of images with no data loss. Originally, the GIF format made lower-resolution still pictures easier to pass around, but the fact that it could also be used to create animated images was a game changer.
GIF is now broadly used for animated graphics. Email marketing, banner advertising, memes on social media, animated reaction stickers in Discord servers – the list goes on and on! Even the SVGator team, which is obviously partial to the SVG format, recognized the need to keep GIFs in the creative loop. SVG to GIF export is one of the most requested features we’ve had, along with SVG to video export.
Creating animated graphics with vectors and keyframes is still the best way to master and utilize motion design in the context of web performance, usability, and accessibility. Exporting your SVG animations to a raster format, like GIF, simply augments the range of scopes you can use your custom motion graphics for.
If the source image is a full color image, like a 24-bit PNG, the compression process behind GIF will cause loss of details, due to the quantization that comes with lossy compression. The same happens when you convert a video file to animated GIF.
GIF Best Practices
The conversation around how to create a GIF always boils down to the same keynote: the balancing act between exporting the smallest GIF file size with the “best you can work with” GIF quality. There’s no default equalizer or one-size-fits-all solution for this dilemma. So, the best we can do is follow a set of GIF best practices, to the extent that they apply to each use case.
The intended use for your animated GIF plays a major role in how you tailor these practices. There are a few considerations to take into account:
➜ Decide how much quality you’re willing to sacrifice in order to keep the GIF size manageable
➜ The networks/platforms the GIF is going to play on
➜ The respective native resolution/quality settings of the network/platform in question
➜ How impactful the GIF size will be on page load speed
➜ Whether or not the GIF file size will negatively reflect on SEO, etc.
As you can see, size matters most! And on that note, we need to:
The best GIF size for each particular file you export can indeed vary, but the best GIF optimization practices will always be connected to the same four elements:
These four GIF specs, and their customizable nature, are easy to fine-tune, especially if you go into the design process already familiar with the recommended guidelines on how to optimize a GIF. It’s much simpler to export an already optimized GIF than it is to jump from tool to tool trying to figure out how to edit a GIF in post-production.
Third-party GIF optimizers/compressors, like ezGIF, can help you optimize a GIF, but more often than not, the quality of the animated graphic will take a major hit. What little control you have with this GIF optimization method comes from a list of suggested options, like the ones pictured here:
Nothing wrong with using post-production tools to optimize motion graphics. We go over quite a few of them in our “How to Optimize SVG Animations[...]” guide. But if you’re looking to get a firm grip on the exact steps to take to both lower GIF file size and improve GIF quality, then we’ve got you!
Let’s take a look at how the controllers behind GIF optimization work!
Optimizing your canvas for the GIF format from the get-go is the first step you can take. Resolution represents the size of a media file measured in pixels (more pixels to display = more data = larger file size). Whether you’re going for a square, horizontal, or vertical aspect ratio, a larger canvas will almost always result in an above-average GIF size after export.
Due to the GIF format being compressed using LZW lossless compression, the canvas size you choose, along with the complexity level of your animated graphics, will determine how large of a .gif file you’ll end up with. If exported to newer image file formats, like APNG or WebP, the same animation could be less heavy. So, it’s simply a matter of taking into account the inherent characteristics of the GIF format.
The average GIF size dimensions are 480p resolution (4:3) — at 640 width ×480 height. You’ll find platforms advising to keep dimensions under 1200x900px, and others encouraging the use of GIFs that are 500px wide at most. Staying within the size limit recommendations of the GIF animation’s final destination will save you the trouble of finding out how to crop a GIF with minimal detail loss.
When resolution/canvas size is not a feature you can alter for your GIF’s intended use, it’s time to bring out the big guns: optimizing the GIF framerate. GIF search engines like Giphy have their own set of framerate best practices for their uploads (between 15 and 24fps, with a total of fewer than 200/100 frames in total). But it’s worth noting that you can get away with much less and still end up with a GIF that runs smoothly(ish)!
If figuring out how to lower GIF file size is top priority for your use case, then lowering your animation’s framerate is the quickest GIF optimization tactic out there. The number of frames per second dictates the total number of frames that get rendered in the final export. The GIF size difference between a 10-second animation at 12fps (= 120 frames total), vs. the same animation at 30fps (= 300 frames total) is significant.
When exporting animated vector graphics as GIFs with SVGator, you can set your export’s framerate as low as 12fps and still wind up with a decent GIF quality. In fact, 12fps is what a lot of traditional animators use to this day for their hand-drawn frames. On the other hand, it goes without saying that this framerate, or any lower, would make for a laggy GIF when using a 720p resolution source video.
In some cases, as a GIF creator you’ll need to bear in mind a platform’s native framerate settings in order to deliver an animation at an expected quality. If GIF framerate and resolution are non-negotiable, there are still other ways you can go about GIF optimization.
A GIF needs to be just long enough for that satisfying perfect loop to connect between each iteration. This format works best for short animations, and that’s strongly connected to GIF file size optimization. For example, Giphy recommends a 6s duration at most, and won’t even allow uploads that are longer than 15s. The good news is that you can change the speed of GIF to compress GIF file size of a longer animation.
To edit GIF speed, you can use GIF editor tools, which usually give you preset options like x0.25, x1.5, x2, etc., to either slow down or speed up an animation. If you’re exporting a GIF from SVGator, you can control GIF speed with even more precision, because we use percentages (between 1-1000%). When you edit GIF speed settings, two things happen:
- The length (duration) of your GIF changes (i.e., a 10s GIF at 200% speed becomes a 5s GIF)
- The total number of frames changes (at 30fps — the initial 10s GIF, at 200% speed, will have 150 total frames as it becomes a 5s animation, down from 300 total frames).
With a shorter GIF duration, and a smaller total number of frames, you get to export a more lightweight file, without altering framerate/resolution settings at all. Pretty neat, right? But what about the number of iterations?
No. The number of iterations in a GIF, or even an infinite loop, will not change the GIF file size. Only the length of the animation that is being repeated matters.
The GIF format supports a maximum of 256 colors, which is not that many, especially when compared to the 16+ million color palettes of other image file formats. Even with the GIF color limitation, the number of colors you use for one animated graphic can still weigh down a file’s size a great deal.
The GIF format, with its lossless compression, stores the information of each frame without discarding any pixel data. This means that the more colors you use (and the more pixels are changing between frames), the larger the rendered GIF file will be. Optimizing a GIF by lowering the limit on the number of colors used is pretty straightforward.
It's a common misconception to try and use the minimum number of colors in a graphic. This vector graphic originally uses only 4 colors: yellow, dark yellow, blue-black and white. With only 4 colors selected at export, you can lose low contrast colors, and edges will look jagged and pixelated. You need extra colors for anti-aliasing (aka to prevent the raster artifact around sharp edges) which makes pixel-based images look smooth.
Most design tools, including SVGator, allow you to input any custom number of colors (most common presets are: 8, 16, 32, 64, 128, and 256 colors). You can go as low as using only 8 colors for your animated GIF, but you’ll need to keep this color number setting in perspective when designing your graphic.
To keep GIF quality at an average level with just 8 colors, it’s recommended that you:
➜ Use a restricted color palette by default ✅
➜ Use less movement/include less moving elements (i.e., use a flat, solid-color background instead of confetti background animation) ✅
➜ Hold back on working with gradients, or color animation. ✅
With these GIF optimization best practices in place, you should be able to easily keep your animated GIF as small as possible with minimal compromises on quality.
How to Enhance GIF Quality
Animated GIF image file size is the top concern GIF creators hyperfocus on, and for some very valid reasons. Heavy GIFs can slow pages down to a crawl, have a negative impact on SEO, and can even lead to failed email marketing campaigns when loading too sluggishly. With so much at stake, size optimization can sometimes overshadow the best practices we have on hand for GIF quality optimization.
As you would expect, overstepping the limits when optimizing a GIF file size can ultimately leave you with a far-below-average GIF quality level. At that point, there are no tips and tricks that can patch a GIF back up.
Learning how to increase GIF image quality is even more straightforward than file size optimization. Only two key settings to tweak for an instantly obvious GIF quality improvement!
The GIF format doesn't support semi-transparency (alpha-channel), which means that every pixel can only be either fully transparent or fully opaque. As a result, the edges of a GIF exported with a transparent background will look rough (pixelated) on most backgrounds. This visual artifact can lessen the overall quality of your animated GIFs. It’s the type of defect that you can’t unsee once you notice it.
Fortunately, there’s a quick fix for this pesky transparent GIF-specific drawback! Edge matting makes white jagged edges considerably less noticeable. This feature makes the color of the background blend with the color of the edges of your animated graphics, instead of blending into white. When you export GIFs from SVGator, you’ll see the “Matte color” option enabled by default when you have the “Transparent background” option checked.
You can customize the color selected for the “Matte color” feature, but by default, it will either be set to white, or to the color of your canvas. Knowing the color of the background that your transparent animated GIF will be added to gives you a clear advantage. It’s difficult to make a transparent GIF look neat on any background, but with edge matting, you can make that GIF look amazing on an intended color, or at least alright on a similar color.
Dithering in GIF editing is the process of intentionally adding colored pixels in a noise pattern to make your animated graphics look smoother. The process uses two colors to determine the shade of a third color by placing the two pixels closer together.
This GIF quality enhancement measure works wonders, especially if you’re working with a restricted color palette, gradients, or true-color images when creating mixed media GIFs (vectors + PNG). If your GIF has plenty of large areas with solid colors, like backgrounds, flat graphics, etc., you can do without dithering.
GIFs can be rendered to play with four different direction settings when you’re exporting them from SVGator. Your choice of GIF direction won’t have any influence on the graphic’s file size or quality, but instead it’s a setting worth experimenting with for different effects.
The four GIF direction options are:
➜ Normal - default forward playback direction
➜ Reverse - backward playback direction after export
➜ Alternate - the GIF plays Normal (forward) first, and then Reverse (backward)
➜ Alternate Reverse - the GIF plays Reverse (backward) first, and then Normal (forward)
Wondering what effects you can go for? Set your GIF direction to Alternate for your animation to play boomerang style
Think of GIF stickers as a different breed of GIFs that are still the same species as the GIFs made using vector animations or video conversions. They’re mostly used in messaging apps, but they’ve blown up in popularity as creators started adding them to Instagram/Facebook stories, Snapchats, and viral TikTok videos.
Giphy describes their GIF stickers as “GIF files with transparency around the edges [...]. In order to register as a sticker, at least 20% of pixels must be transparent in the first frame.” Their GIF sticker best practices also include a recommendation that the loop be set to “Infinite,” and that creators use multiples of 4 for width and height.
GIF Benefits and Disadvantages
A list of pros and cons for any image file format will bear little weight to those that have already made up their mind on what type of animated graphics they like creating/using most. Let’s just say that GIFs are an acquired taste for the tech-savvy crowd that puts performance over shareability any day. And they’re irreplaceable for the creatives that have been using the GIF format from the internet’s dawn.
Find yourself in the middle of this spectrum?
Then let’s discuss GIF benefits vs. GIF disadvantages!
|✔️ GIF Benefits||❌ GIF Disadvantages|
|Lossless compression - A GIF’s quality never drops as a result of compression. No amount of data is lost in the process.||Lossless compression - A blessing and a curse, lossless compression is essentially the main reason why a GIF file can amount to a mammoth size so easily. Not one pixel left behind!|
|Optimized GIFs are easy to create - Equipped with GIF best practices, you can create optimized animated GIFs that won’t be a burden on page load speeds or stifle your digital marketing efforts in any way.||GIFs need to be optimized - GIF optimization is perceived as a speed bump in the creative process, and it requires a constant juggle of size and quality.|
|Global support - GIFs can be played anywhere on the web. They are supported by all browsers and on most SNS platforms, prototyping tools, etc.||Editing GIFs after export is tricky - Because GIFs are actually a series of image frames put together, editing files (especially animation-based GIFs) is difficult.|
|Shareability - Thanks to GIF repositories and their close-to-universal integration into all the places where we interact with others online, meme GIFs in particular are a force to be reckoned with.||Gen Z is deeming GIFs cringe|
Looks like the jury’s still out on GIF, 35 years after its creation!
Future of GIF
The GIF format as it stands today, and with its notable past snapbacks into glory, is not going away anytime soon. With the advantage of universal adoption and with so many leading design tools making it a breeze to create GIFs with minimal tech expertize, GIF is far from becoming obsolete.
On top of all that, GIFs as simple animated loops might not be where the metamorphosis of this graphic format ends. Giphy Clips are the latest add-on to this creative medium, which are basically GIFs + Sound. Come what may, the future of GIF is looking interesting, to say the least!
The storyline of the GIF format is still unfolding, and there’s more marketability and entertainment value to tap into with GIFs. Use this GIF best practices guide to experiment with the GIF format in the shape and context of today’s digital sphere, where performance trumps all. Log in to SVGator, export your first optimized GIF, and show us your tip-top loops on Facebook, Instagram, Twitter or Reddit!