那里有什么animationGIF的替代品？

为什么那些讨厌的GIF在animation照片上仍然占据主导地位？ 我相信现在有更好的select，但为什么他们中没有一个获得牵引力？

Answer 1

animationPNG或APNG（ http://en.wikipedia.org/wiki/APNG ）。 他们可以用APNG Plug-in在GIMP 中制作但是GIFanimation实际上是主要的一个，但flash还是接pipe了，但这本身并不是一个真正的图像。

此外，来自同一维基百科页面的其他替代scheme：MNG文件格式是APNG更强大的替代scheme，尽pipe它是一种更复杂的格式，并且具有较less的浏览器支持。

GIF文件格式比APNG具有更好的应用程序和浏览器支持，但是每帧只限于256色，并且通过将其中一个调色板颜色映射到透明，仅支持1位alpha透明度。

SVG结合脚本或SMIL可以创buildvectorgraphics的animation，并可以合并光栅graphics。 （请参阅SVGanimation。）

使用HTML 5 canvas Object创build的dynamicgraphics也可以是animation的。

网页animation的另一种方法是使用传统的静态图像，并使用JavaScript，[22] Adob​​e Flash，Microsoft Silverlight，Java或其他基于插件的技术对其进行animation处理。

Answer 2

WebP是采用有损和无损压缩的图像格式。 它目前由Google开发。

与animationGIF相比，animationWebP的优势

• WebP支持具有8位Alpha通道的24位RGB颜色，与GIF的8位颜色和1位Alpha相比。

• WebP支持有损和无损压缩; 事实上，一个animation可以结合有损和无损帧。 GIF只支持无损压缩。 WebP的有损压缩技术非常适合从真实世界的video创build的animation图像，这是日益stream行的animation图像源。

• WebP比GIF1需要更less的字节。 转换为有损WebP的animationGIF缩小了64％，而无损WebP缩小了19％。 这在移动networking上尤其重要。

• WebP在寻找的时候需要更less的时间进行解码。 在眨眼中，滚动或更改标签可以隐藏和显示图像，导致animation暂停，然后跳转到不同的点。 导致animation丢帧的CPU使用率过高也可能要求解码器在animation中向前查找。 在这些情况下，animationWebP的总解码时间为GIF的0.57倍，从而减less了滚动期间的中断，并且更快地从C​​PU利用率峰值恢复。

与animationGIF相比，animationWebP的缺点

• 在没有寻求的情况下，WebP的直线解码比GIF更占用CPU资源。 有损WebP的解码时间是GIF的2.2倍，而无损WebP的解码速度是1.5倍。

• WebP支持不如GIF支持那么普遍，这是有效的。

• 向浏览器添加WebP支持会增加代码占用空间和攻击面。 在Blink中，这大约有1500多行代码（包括WebP demux库和Blink-side WebP图像解码器）。 请注意，如果WebP和WebM共享更常见的解码代码，或者WebP的function包含在WebM中，则此问题可能会减less。

https://developers.google.com/speed/webp

Answer 3

我想build议使用animation图片的video。 现在HTML5中的video标签已经得到了广泛的支持，并且几乎可以支持MPEG4 。

<video autoplay loop src="sample.mp4"> 

通过自动播放和循环属性，可以轻松地复制animationGIF的行为。

我会承认， video的透明度仍然是一个问题。

Answer 4

我用一个jQuery插件来animation一系列的PNG。 见http://blog.shynet.nl/post/2010/08/28/Alternative-to-animated-GIFs-AnimateImages-jQuery-Plugin.aspx

我不确定插件是否有大量图片的性能。 我只用它来闪烁的图标

Answer 5

正如Nathan和其他人早些时候回答的那样，animationgraphics有许多方法。

我个人比较喜欢

（1）在Illustrator或Inkscape等中创buildgraphics

（2）以.SVG格式保存graphics

（3）将SVG代码（即。和之间的所有内容）embedded到您的网页中

（4）使用snap.svg（javascript libary）为embedded的svggraphics设置animation。 大多数现代浏览器都支持SVG

Answer 6

用jquery，我可以来回旋转6 jpgs的透镜序列，以达到animationgif的相同结果; 例如http://www.vicgi.com 。 6张图片的总文件大小只有233KB。 如果这是一个animationGIF将有11帧，文件可能已经超过1MB。 更不用说GIF的颜色数量限制在256个。

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 ：在body标签结束之前添加此代码，假设您已经链接到jquery cdn或下载。

 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 7

MNG格式是一种类似于PNG的animation格式，但似乎并没有得到太多的普及。 所以这只是一个采用的问题 – animationGIF工作正常（并且没有以前的专利限制），为什么不使用它们？ 为什么修理什么不坏？

Answer 8

这显然是相当长的一段时间，但时代的变化和.webm似乎是一个很好的竞争者。

简而言之，这是一种媒体格式，是免费的。 它将与HTML5video标签一起使用（请参阅@KeithShaw的答案），并且需要支持相应编解码器的浏览器。 不过，YouTube是其中一个采用者，以及其他一些我不会在这里提及的行业。

这是该项目的网站： WebM项目

Answer 9

我的build议是：看看HTML委员会决定在这个问题上。 在此之前，GIF的工作原理是低质量的图片，HTML5的video标签将会在网页上为您提供帮助。 无论如何，原生的东西（非networking）总是遵循媒体格式的网页。