Back when I started in web design, animated GIFs (pronounced like the peanut butter) were animation from the wrong side of the tracks. We often used them to give a client an idea of what a Flash animation would do. They were seldom used them in actual web work. Animated GIFs were viewed with disdain. They couldn’t do many of the things that Flash could do and were comparatively big in file size.
But when Steve Jobs rang a serious blow to Flash (by not allowing it on any ’i’ device) with no good substitute to fill its animation space, coupled with the ability of devices to handle larger files, animated GIFs started making a comeback. And why not? When done correctly, they are able to add some nice animation elements.
What are animated GIFs?
Animated GIFs are composed of a series of images. The images are layered and change according to a timeline programmed to change the images by time, method and number of loops. The images may change in 0.1 seconds (instantly) up to many seconds (allowing for reading).
Where might you see animated GIFs?
Where might you see them? Probably in places you didn’t expect. Google uses them regularly on their search page when doing something for a special day- those little animations around the Google search bar are often animated GIFs.
Since all browsers can render animated GIFs they are safe to use on the web. However, they work less well in email because email programs (like Outlook) often don’t render them.
What is the future for animated images?
Its hard to say what the future is for anything in web world since it changes so much, but there are also animated PNGs (called APNGs – pronounced ‘a pings’) which will probably take the place of animated GIFs. APNGs can display more colors, have greater transparency capability and have smaller files size. Currently they are supported in Firefox and Opera, but you won’t see them across the board (or know you’re seeing them) until Chrome and Microsoft Edge support them by default. Chrome does not include APNG support by default but there is an add-on. If interested, you can add it here: https://chrome.google.com/webstore/detail/apng/ehkepjiconegkhpodgoaeamnpckdbblp?hl=en ) Hopefully Chrome and Edge will make these changes soon.
Below are Firefox’s animated images in GIF and APNG: Note the additional colors and better resolution of the APNG (even if it isn’t bouncing for you).