具有广泛浏览器支持的动画 gif 替代方案？

Posted 2023-03-25

【中文标题】具有广泛浏览器支持的动画 gif 替代方案？

【英文标题】：Animated gif alternative with broad browser support?

【发布时间】：2014-11-27 21:05:40

【问题描述】：

我想在博客和论坛中插入动画图像（因此我无法使用 javascript、CSS、SVG、html5 和其他技巧），但是 gif 动画太大，大约 700K。它是由一张照片制成的，所以我不能将颜色减少到 256 个调色板条目以下，并且图像的大小也固定为 350 像素的高度。 我尝试使用名为“gif2webp”的实用程序将其转换为“webp”动画，大小仅减少到 200K。但是它不会显示在我最喜欢的 Opera 浏览器中。比我尝试使用实用程序“gif2apng”的“apng”格式，大小再次减小到 400K，但不幸的是，动画没有出现在 Google Chrome 稳定版中。对于一个简单的动画，有没有其他替代方法可以作为带有“img src=”HTML标签的简单图像插入网页，并且所有主流浏览器都支持？

【问题讨论】：

尽管我不敢这么说，但我能想到的唯一其他可能性就是 Flash。

【参考方案1】：

2020 年 7 月 7 日更新

WebP 是 GIF 的最佳替代品，几乎所有浏览器都支持。 Chrome、Firefox、Opera 和 Edge 已经支持它几年了。即将推出，它将受到 Safari 14 和 ios Safari 的支持。 WebP 文件大小比 GIF 小得多 - 通常小 60-85%。 WebP 还支持透明度，并且不像 GIF 那样被限制为 256 种颜色。

Chrome、Firefox、Opera、Safari 和 Edge 都支持 APNG，因此可以替代 GIF。 APNG 支持 24 位颜色和透明度，因此您可以获得比 GIF 更高质量的图像，但文件大小非常大 - 甚至比 GIF 还要大。

相反，您可以坚持使用所有浏览器都支持的 GIF。要减小文件大小，请应用有损压缩。通过对下面这个 GIF 应用 80% 的有损压缩，文件大小从 424.7 kB 减少到 253.1 kb，减少了 40%。

没有有损压缩的 GIF：https://sirv.sirv.com/Examples/drill/drill.spin?image&scale.height=300

80% 有损压缩的 GIF：https://sirv.sirv.com/Examples/drill/drill.spin?image&scale.height=300&gif.lossy=80

根据您的源图像的复杂性和大小，您甚至可以将文件大小减少多达 60%，尽管可能低至 25%。很大程度上取决于您的特定形象。