为什么那些讨厌的 GIF 仍然在动画图片中占主导地位？我敢肯定现在有更好的选择，但为什么没有一个获得关注？
【问题讨论】：
标签： image
动画 png 或 APNG (http://en.wikipedia.org/wiki/APNG)。它们可以在GIMP 和APNG Plug-in 中制作 但动画 Gif 确实是其中的主要内容 - 虽然 Flash 有点占了上风，但这本身并不是真正的图像。
此外，来自同一维基百科页面的其他替代方案：MNG 文件格式是 APNG 的更强大替代方案，尽管它是一种更复杂的格式并且对 Web 浏览器的支持较少。
GIF 文件格式比 APNG 具有更好的应用程序和浏览器支持，但它被限制为每帧 256 种颜色，并且仅支持 1 位 alpha 透明度，通过将调色板颜色之一映射到透明。
SVG 与脚本或 SMIL 结合可以使矢量图形动画化，并且可以合并光栅图形。 （参见 SVG 动画。）
使用 HTML 5 画布对象创建的动态图形也可以动画化。
在网页中制作动画的另一种方法是使用传统的静态图像并使用 JavaScript、[22] Adobe Flash、Microsoft Silverlight、Java 或其他基于插件的技术对其进行动画处理。
【讨论】：
WebP 是一种同时采用有损和无损压缩的图像格式。 它目前由 Google 开发。
与动画 GIF 相比，动画 WebP 的优势
与 GIF 的 8 位颜色和 1 位 alpha 相比，WebP 支持 24 位 RGB 颜色和 8 位 alpha 通道。
WebP 支持有损和无损压缩；事实上，单个动画可以结合有损和无损帧。 GIF 仅支持无损压缩。 WebP 的有损压缩技术非常适合从真实世界视频创建的动画图像，这是一种越来越流行的动画图像来源。
WebP 需要的字节数少于 GIF1。转换为有损 WebP 的动画 GIF 缩小了 64%，而无损 WebP 缩小了 19%。这在移动网络上尤其重要。
WebP 在存在搜索的情况下需要更少的时间来解码。在 Blink 中，滚动或更改选项卡可以隐藏和显示图像，导致动画暂停然后向前跳到不同的点。导致动画丢帧的 CPU 使用过多也可能需要解码器在动画中向前搜索。在这些场景中，动画 WebP 的总解码时间是 GIF 的 0.57 倍，从而减少了滚动期间的卡顿，并更快地从 CPU 利用率峰值中恢复。
动画 WebP 与动画 GIF 相比的缺点
在没有搜索的情况下，WebP 的直线解码比 GIF 更占用 CPU。有损 WebP 的解码时间是 GIF 的 2.2 倍，而无损 WebP 的解码时间是 1.5 倍。
WebP 支持不如 GIF 支持广泛，后者实际上是普遍的。
向浏览器添加 WebP 支持会增加代码占用空间和攻击面。在 Blink 中，这大约是 1500 行额外的代码（包括 WebP demux 库和 Blink 端 WebP 图像解码器）。请注意，如果 WebP 和 WebM 共享更通用的解码代码，或者 WebP 的功能被包含在 WebM 中，那么这个问题在未来可能会减少。
【讨论】：
我想建议将视频用于动画图片。现在 HTML5 中对 video 标记的广泛支持和对 MPEG4 的几乎同等支持。
<video autoplay loop src="sample.mp4">
使用自动播放和循环属性，很容易复制动画 GIF 的行为。
我承认transparency in video 仍然是个问题。
【讨论】：
正如 Nathan 和其他人之前所回答的，有很多方法可以为图形设置动画。
个人比较喜欢
(1) 在 Illustrator 或 Inkscape 等中创建图形。
(2) 将图形保存为.SVG格式
(3) 将 SVG 代码（即 和 之间的所有内容）嵌入到您的网页中，并且
(4) 使用 snap.svg (javascript 库) 为嵌入的 svg 图形设置动画。大多数现代浏览器都支持 SVG
【讨论】：
使用 jquery，我可以来回旋转透镜序列的 6 张 jpg，以获得与动画 gif 相同的结果；例如，http://www.vicgi.com。 6张图片的总文件大小仅为233KB。如果这是一个动画 gif，那么将有 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)
});
【讨论】：
这显然是很久以前的事了，但时代变了，.webm 似乎是一个很好的竞争者。
简而言之，它是一种免版税的媒体格式。它将与 HTML5 视频标签一起使用（请参阅@KeithShaw 的答案），并且需要支持适当编解码器的浏览器。但是，YouTube 是采用者之一，还有许多其他行业，我在此不再赘述。
这是项目的网站：WebM Project
【讨论】：
MNG format 是一种类似于 PNG 的动画格式，但它似乎并没有获得太多的普及。所以这只是一个采用的问题——因为动画 GIF 可以正常工作（并且没有以前的专利限制），为什么不使用它们呢？为什么要修复没有损坏的东西？
【讨论】：