What alternatives for animated GIFs are there?

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

With jquery, I am able to rotate 6 jpgs of a lenticular sequence back and forth to attain the same result of an animated gif; for example, http://www.vicgi.com. The total file size for 6 image is only 233KB. Had this been an animated gif there will be 11 frames and the file could have been over 1MB. Not to mention the number of colors is limited to 256 for a GIF.

HTML

<!-- Reserve a div for showing the images with id=banner -->
<div class="row">
    <img id="banner" src="images/first_image.jpg" class="img-responsive">
</div>

Javascript: Add this code before end of body tag, assume you have linked to jquery cdn or download.

var images = [
"first_image.jpg",
"second_image.jpg",
"third_image.jpg",
"forth_image.jpg",
"fifth_image.jpg",
"sixth_image.jpg",
"fifth_image.jpg",
"forth_image.jpg",
"third_image.jpg",
"second_image.jpg",
];   // add the images if necessary

numImages = images.length,
index = 1;  // start from the second image because first image is already in the HTML

function cycleImages() {
    image = "images/" + images[index];   // assume all the images are store in the images sub-directory
    $("#banner").attr("src", image);     // set the src attribute of the <img tag to the image to be shown
    index++;                             // advanced to the next image
    if (index == numImages) index = 0;   // recycle to the first image
}

$(function() {                          // start the rotation when document is ready
    setInterval("cycleImages()", 800)
});

Answer 6

This was obviously quite a long time ago, but times change and .webm seems to be a good contender.

In short, it is a media format that is meant to be royalty free. It would be used with the HTML5 video tag (see the answer from @KeithShaw) and would require a browser that supports the appropriate codec. However, YouTube is one of the adopters, as well as, a number of other industries that I will not mention here.

This is the project's site: WebM Project

Answer 7

MNG format is a PNG-like format for animations, but it doesn't seem to have gained much popularity. So it's just a question of adoption - as animated GIFs work fine (and are free of former patent restrictions), why not use them? Why repair what's not broken?