在科技界，时尚不会重演——科技发展迅速，几乎不会倒退。但就 GIF 动画而言，似乎又回到了 90 年代。GIF 动画随处可见，不仅出现在奇怪、俗气的网站上——它们已经成为主流。现在，您可以在 Gawker 和 TechCrunch 等知名网站上看到以 GIF 动画形式分享和播放的短视频。
GIF 格式远非最佳选择。虽然它是一种简单的图像格式，所有网络浏览器和智能手机都支持，但将视频转换为动态 GIF 会生成非常大的文件。下载它们需要时间。播放它们会占用大量内存和 CPU 资源。照片共享网站、博客甚至新闻网站上的页面，如果包含几个动态 GIF，速度就会变得非常慢，而这些 GIF 的大小通常比页面中所有图像的总和还要大。
GIF 格式不适用于全彩视频。它仅使用 256 种颜色（没有半透明的 alpha 通道），更适合用于绘图而不是照片或视频帧。对于单个照片帧，JPEG 是一种质量和文件大小都更好的格式，但 JPEG 不支持动画。
谷歌的 WebP 格式是动画 GIF 的有力替代者，它支持新的WebP 动画。在这篇博文中，我们将展示如何使用 Cloudinary 的云端媒体管理服务将动画 GIF 即时转换为WebP 动画。此外，我们还详细介绍了如何仅在受支持的浏览器上自动提供动画 WebP 文件，否则将优雅地降级为动画 GIF。最终结果是全彩色、高质量的动画图像，其重量要轻得多，而且在视觉上几乎与原始动画 GIF 文件相同。
从动画 GIF 到动画 WebP 的转换
以下这张无聊的人的 GIF 动画是从Wikimedia上传到 Cloudinary 的。虽然它是一张 279×193 的相对较小的图像，但这段短视频却重达1.5MB。如果你的网站上有 30 张这样的图片，那么总共就是 45MB，加载需要时间。如果您的网站每天有 1000 名访问者，那么仅这些图片的月带宽就将达到 1.3TB！
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/101f2f8f6b154655af0f1e2a24c23211~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=279&h=193&s=1603684&e=gif&f=69&b=faf4e4
Cloudinary 的媒体管理服务支持上传、转换和管理各种媒体文件，包括图像、视频和音频以及新兴媒体类型。下面的代码示例在所有流行的框架中构建了一个动态 URL，将上面的动画 GIF 转换为动画 WebP。此 URL 启用标志awebp（或者fl_awebp如果您直接提供 URL），并引用同一图像，bored_animation将其文件扩展名更改为.webp（这告诉 Cloudinary 您想要将图像转换为此文件格式）。
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cea64cd91094de9a9da7dac67f399fd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=279&h=193&s=429422&e=webp&f=69&b=faf4e4
注意： 动画 WebP 目前仅受 Chrome 浏览器支持。如果您在此处看到损坏的图像，请尝试在 Chrome（v32 或更高版本）中打开此博客文章。
上面的WebP 动画是Cloudinary 在访问动态 URL 时即时生成的。它看起来与原始图像相同，但大小仅为419KB 。与原始 1.5MB 的动画 GIF 相比，这意味着我们节省了72%的文件大小、带宽和加载时间。
默认情况下，Cloudinary 以有损模式生成动画 WebP。用于上述动画 WebP 的默认质量级别为 80%，但您可以选择其他质量级别。
让我们尝试以较低的质量级别生成相同的动画 WebP。我们将参数设置quality为 40（q_40直接提供 URL 时）。您可以在下面看到动态转换 URL 和生成的WebP 动画。
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b4180940e894c98b16e7a0144e7d823~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=279&h=193&s=199602&e=webp&f=69&b=faf4e4
当质量设置为 40% 时，视觉差异几乎不可察觉，但生成的文件只有195KB。与 80% 质量的动画 WebP 相比，这节省了 53% 的大小和带宽，与原始 GIF 相比，尺寸减少了87% 。
调整 GIF 动画的大小和剪裁，并转换为 WebP 动画
您可以使用 Cloudinary 的图像转换 URL 来裁剪和调整动画 GIF 的大小。以下转换 URL 和生成的图像会生成一个 150×100 的北向填充矩形，该矩形由相同的动画 GIF 组成。生成的图像大小为429KB ，Cloudinary 已对其中的动画 GIF 进行了某些优化。
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f57a7905a9946eab851c99315c27297~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=150&h=100&s=439618&e=gif&f=69&b=faf4e3
现在我们可以将此图像转换为动画 WebP。以下 URL 生成相同的 150×100 缩略图，同时转换为具有 80% 质量的动画 WebP。结果只有154KB，这意味着我们节省了64% 的文件大小，而不会影响质量。
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d76f219731584eb4a2a0aa25762afd74~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=150&h=100&s=157588&e=webp&f=69&b=faf4e4
动画 WebP 格式不仅适用于视频，还非常适合用于绘画动画。下面的示例展示了从 Wikimedia 上传到 Cloudinary 的动画绘画。左侧的原始动画 GIF 大小为790KB，而右侧的 WebP 版本在 80% 质量下仅重375KB（减少了52.5% ）。
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/905772fabb4b47ebac6783462113a9c7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=320&h=240&s=383532&e=webp&f=29&b=fbf7f6
仅在受支持的浏览器上自动提供动画 WebP
希望我们能够证明动画 WebP 远优于动画 GIF。问题是只有 Google Chrome 浏览器版本 32 或更高版本支持此格式。Chrome 是最受欢迎的浏览器，并且大力推动升级；例如，Cloudinary 网站访问者中有超过 60% 使用的是 Chrome v32 或更高版本。在您的网站上，Chrome 用户可能也是足够多的受众，足以证明提供 WebP 图像是合理的。
挑战在于向受支持的浏览器的用户提供 WebP 图像，并向其他浏览器的用户提供其他格式（GIF、PNG、JPG 等）。在我们的案例中，我们需要向 Chrome v32 或更高版本的用户提供动画 WebP，并向所有其他用户提供动画 GIF。
Cloudinary 可以根据每个用户的浏览器自动向其提供适当的图像格式（请参阅我们之前的帖子，其中更深入地讨论了此功能）。要对像下面这样的动画图像执行此操作，只需将参数设置fetch_format为auto（或f_auto对于 URL）。Cloudinary 会在 CDN 级别自动检测用户浏览器，并根据用户的浏览器提供缓存和优化的转换动画 WebP 或原始动画 GIF。
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f894386b72134987910bf9dfc02f9ff8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=150&h=100&s=566321&e=gif&f=69&b=faf4e3
对动画 WebP 图像进行进一步的转换
我们上面展示了如何在 Cloudinary 中调整动画图像的大小和裁剪。但是，您可以对动画 GIF 或 WebP 图像应用更多的转换。以下示例使用 Cloudinary 的图像转换 URL 来将动画 GIF 的边角弄圆，添加灰色边框和另一个上传图像的半透明水印叠加，最后转换为动画 WebP。同样，WebP 格式生成视觉上相同的结果，但重量仅为 GIF 版本的 35%（节省65% 的大小和带宽）。
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19512028740f4ef1a0109ca5876df7bd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=156&h=106&s=238756&e=webp&f=69&b=f3edde
概括
从动画 GIF 切换到动画 WebP 的效果令人印象深刻——在我们上面展示的例子中，图像大小和带宽减少了 65-90%，但视觉效果相同。尽管 WebP 仅被有限数量的浏览器使用，但最新版本的 Chrome 越来越受欢迎，因此 WebP 的重要性正在上升。
有了 Cloudinary 的自动转换和基于用户浏览器的动画格式选择性交付功能，您绝对没有理由不使用动画 WebP 来显示您的短视频。此外，如果您将原始高质量视频转换为 WebP（而不仅仅是像我们在上面的示例中所做那样从 GIF 转换为 WebP），您将获得更好的视觉效果，因为 WebP 格式支持全彩色，而动画 GIF 只有 256 种颜色。
顺便说一句，我们认为，现在那些充斥着动画 GIF 的主流网站，如果能同时播放，那么通过显示动画的第一个静止帧，并带有一个小的播放按钮，可以达到更专业的效果。使用 Cloudinary，您可以轻松地将动画 GIF 或WebP 动画转换为任何单帧图像格式。例如：
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a4c644dbd71457b89211e943ee24607~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=150&h=100&s=5135&e=jpg&b=f9f2e2
所有 Cloudinary 用户（包括使用免费计划的用户）都可以使用动态 GIF 转换、即时转换为 Web 以及本文中描述的所有其他强大的图像转换和优化功能。设置一个免费的 Cloudinary 帐户来使用。
