【问题标题】:What alternatives for animated GIFs are there? [closed]动画 GIF 有哪些替代品? [关闭]
【发布时间】:2011-06-19 13:31:42
【问题描述】:

为什么那些讨厌的 GIF 仍然在动画图片中占主导地位?我敢肯定现在有更好的选择,但为什么没有一个获得关注?

【问题讨论】:

  • 动画PNG(与gif没有什么不同,支持较少),javascript动画的数量:滚动由精灵构建的图像,在画布上绘图和其他技巧。但我相信 GIF 是最兼容和最安全的
  • 这个问题发布已经快 9 年了。我想知道动画(光栅)图像格式的当前状态。现在有“合理”支持的格式吗? GIF 仍然是我们最好的选择吗?我应该就这个话题提出一个新问题吗?
  • @venimus 动画 PNG 支持 alpha 通道,这使得它们与 GIF 非常不同。
  • GIF 仍然占据主导地位很大程度上是由于缺乏对应该替换什么的普遍共识。有多种相互竞争的动画图像格式,以及我们是否需要它们的争论(将动画留给视频格式)。

标签: image


【解决方案1】:

动画 png 或 APNG (http://en.wikipedia.org/wiki/APNG)。它们可以在GIMPAPNG Plug-in 中制作 但动画 Gif 确实是其中的主要内容 - 虽然 Flash 有点占了上风,但这本身并不是真正的图像。

此外,来自同一维基百科页面的其他替代方案:MNG 文件格式是 APNG 的更强大替代方案,尽管它是一种更复杂的格式并且对 Web 浏览器的支持较少。

GIF 文件格式比 APNG 具有更好的应用程序和浏览器支持,但它被限制为每帧 256 种颜色,并且仅支持 1 位 alpha 透明度,通过将调色板颜色之一映射到透明。

SVG 与脚本或 SMIL 结合可以使矢量图形动画化,并且可以合并光栅图形。 (参见 SVG 动画。)

使用 HTML 5 画布对象创建的动态图形也可以动画化。

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

【讨论】:

  • 这个故事基本上是有两种动画PNG格式:一种是官方认可但过于复杂而无法广泛实施(MNG),另一种是易于实施但未得到官方认可(APNG )。两者都有致命的缺陷,似乎每个人的存在都阻止了对方修复这些缺陷。
  • @TomAnderson:各自的致命缺陷是什么?
  • Chromium 最近添加了对 APNG 的支持,因此即使没有通过扩展添加支持(我们已经使用了多年),它很快就会出现在 Chrome 中。这使得 IE 和 Edge 成为唯一的反对者。
  • 自 2020 年起,APNG 受 WebKit、Blink 和 Gecko 等现代浏览器引擎的支持。
【解决方案2】:

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 中,那么这个问题在未来可能会减少。

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

【讨论】:

  • 自 2020 年起,APNG 已得到 WebKit、Blink 和 Gecko 等现代浏览器引擎的支持。
【解决方案3】:

我想建议将视频用于动画图片。现在 HTML5 中对 video 标记的广泛支持和对 MPEG4 的几乎同等支持。

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

使用自动播放和循环属性,很容易复制动画 GIF 的行为。

我承认transparency in video 仍然是个问题。

【讨论】:

  • iOS 视频强制全屏除外。
  • 好吧,那他们只需要解决这个问题,不是吗?
【解决方案4】:

正如 Nathan 和其他人之前所回答的,有很多方法可以为图形设置动画。

个人比较喜欢

(1) 在 Illustrator 或 Inkscape 等中创建图形。

(2) 将图形保存为.SVG格式

(3) 将 SVG 代码(即 和 之间的所有内容)嵌入到您的网页中,并且

(4) 使用 snap.svg (javascript 库) 为嵌入的 svg 图形设置动画。大多数现代浏览器都支持 SVG

【讨论】:

    【解决方案5】:

    使用 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)
    });
    

    【讨论】:

      【解决方案6】:

      这显然是很久以前的事了,但时代变了,.webm 似乎是一个很好的竞争者。

      简而言之,它是一种免版税的媒体格式。它将与 HTML5 视频标签一起使用(请参阅@KeithShaw 的答案),并且需要支持适当编解码器的浏览器。但是,YouTube 是采用者之一,还有许多其他行业,我在此不再赘述。

      这是项目的网站:WebM Project

      【讨论】:

        【解决方案7】:

        MNG format 是一种类似于 PNG 的动画格式,但它似乎并没有获得太多的普及。所以这只是一个采用的问题——因为动画 GIF 可以正常工作(并且没有以前的专利限制),为什么不使用它们呢?为什么要修复没有损坏的东西?

        【讨论】:

        • 因为它们仅限于 256 种颜色而没有 alpha 透明度。
        • @SLaks 看不到“受限”如何变成“破碎”。并注意“动画 GIF 工作正常”。他们为大多数人做。对于那些不满意的人,Flash 在大多数情况下都可以使用。
        • 这是因为缺少 alpha 透明度而损坏 - 这意味着您不能在所有背景中使用单个动画 GIF,因为您必须分别与每种背景颜色进行合成才能使其看起来不错。跨度>
        猜你喜欢
        • 2011-02-19
        • 2010-10-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2010-09-14
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多