What alternatives for animated GIFs are there? [closed]
Why are those pesky GIFs still dominating when it comes to animated pictures? I'm sure there are better alternatives nowadays, but why aren't any of them gaining traction?
Animated png or APNG (http://en.wikipedia.org/wiki/APNG). They can be made in GIMP with the APNG Plug-in But animated Gif's really are the main one out there - flash kinda took over though, but that isn't really an image per se.
Also, other alternatives from the same wikipedia page: The MNG file format is a more powerful alternative to APNG, although is a more complex format and has less web browser support.
The GIF file format has better application and browser support than APNG, but it is limited to 256 colors per frame and supports only 1 bit alpha transparency, by mapping one of the palette colors to transparent.
SVG combined with scripting or SMIL can animate vector graphics and can incorporate raster graphics. (See SVG animation.)
Dynamic graphics created with HTML 5 canvas Object can also be animated.
An alternative method for animations in web pages is to use conventional static images and animate them using JavaScript,[22] Adobe Flash, Microsoft Silverlight, Java or other plugin based technologies.
WebP is an image format employing both lossy and lossless compression. It is currently developed by Google.
Advantages of animated WebP compared to animated GIF
WebP supports 24-bit RGB color with an 8-bit alpha channel, compared to GIF's 8-bit color and 1-bit alpha.
WebP supports both lossy and lossless compression; in fact, a single animation can combine lossy and lossless frames. GIF only supports lossless compression. WebP's lossy compression techniques are well-suited to animated images created from real-world videos, an increasingly popular source of animated images.
WebP requires fewer bytes than GIF1. Animated GIFs converted to lossy WebPs are 64% smaller, while lossless WebPs are 19% smaller. This is especially important on mobile networks.
WebP takes less time to decode in the presence of seeking. In Blink, scrolling or changing tabs can hide and show images, resulting in animations being paused and then skipped forward to a different point. Excessive CPU usage that results in animations dropping frames can also require the decoder to seek forward in the animation. In these scenarios, animated WebP takes 0.57x as much total decode time2 as GIF, resulting in less jank during scrolling and faster recovery from CPU utilization spikes.
Disadvantages of animated WebP compared to animated GIF
In the absence of seeking, straight-line decoding of WebP is more CPU-intensive than GIF. Lossy WebP takes 2.2x as much decode time as GIF, while lossless WebP takes 1.5x as much.
WebP support is not nearly as widespread as GIF support, which is effectively universal.
Adding WebP support to browsers increases the code footprint and attack surface. In Blink this is approximately 1500 additional lines of code (including the WebP demux library and Blink-side WebP image decoder). Note that this problem could be reduced in the future if WebP and WebM share more common decoding code, or if WebP's capabilities are subsumed in WebM's.
https://developers.google.com/speed/webp
I would like to propose the use of video for animated pictures. There is now broad support for the video tag in HTML5 and nearly equal support for MPEG4.
<video autoplay loop src="sample.mp4">
With the autoplay and loop attributes, it is easy to replicate the behavior of an animated GIF.
I will concede that transparency in video is still an issue.
As answered by Nathan and others earlier, there are many ways to animate graphic.
Personally I prefer
(1) creating the graphic in Illustrator or Inkscape etc.
(2) save the graphic in .SVG format
(3) embedded the SVG code (ie. everything between and ) in your web page and
(4) use snap.svg (javascript libary) to animate the embedded svg graphic. Most modern browser supports SVG