时尚并不是你期望在科技界重演的东西——科技进步很快，几乎永远不会倒退。但如果涉及到动画礼品，人工智能行业分析，似乎90年代又来了。动画礼品随处可见，不仅是在奇怪的、俗气的网站上——它们已经成为主流。现在，您可以在Gawker和TechCrunch等知名网站上看到分享和播放的动画gif短片。GIF格式远不是这个目的的最佳格式。它创建了一个非常简单的视频格式，物联网断路器，并支持智能手机的所有动画文件。下载它们需要时间。播放它们会占用大量内存和CPU资源。照片共享网站、博客甚至新闻网站上的页面，如果页面中包含的动画gif甚至比页面中所有图片的总和还要重，那么页面就会变得非常缓慢。GIF格式不适用于全彩色视频。它只使用256色（没有半透明的alpha通道），更适合绘图，而不是照片或视频帧。对于单个照片帧，JPEG在质量和文件大小上都是一种更好的格式，但是JPEG不支持动画。取代GIF动画的有力竞争者是Google的WebP格式，它支持新的WebP动画。在这篇博客文章中，我们将展示如何使用Cloudinary的基于云的媒体管理服务将动态gif转换为WebP动画。此外，我们还详细介绍了如何仅在支持的浏览器上自动交付动画WebP文件，否则会优雅地降级为动画gif。最终的结果是一个全彩色的，高质量的动画图像，重量轻得多，视觉上几乎与原始动画GIF文件完全相同。从动画GIF到动画webp以下一个无聊的人的动画GIF被从Wikimedia上传到Cloudinary。虽然这是一个相对较小的图像279x193，这个短视频的重量高达1.5MB。如果你的站点上有30个这样的图片，那么总共是45MB，这需要时间来加载。如果你每天有1000名访问者访问你的网站，你每月仅这些图片的带宽就将是1.3TB！URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/multed_animation.gifRuby：复制到剪贴板cl\u image_tag（"无聊_动画.gif")PHP:复制到剪贴板cl\u image_tag（"无聊_动画.gif")Python:复制到剪贴板CloudinaryImage（"无聊_动画.gif"）.image（）节点.js：复制到剪贴板cloudinary.image（"无聊_动画.gif")Java:复制到剪贴板cloudinary.url（）.imageTag（"无聊_动画.gif");JS:复制到剪贴板cloudinary.imageTag（无聊的）_动画.gif'）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"无聊_动画.gif")反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.BuildImageTag（"钻孔_动画.gif")Android:复制到剪贴板媒体管理器.get（）.url（）.generate（"无聊_动画.gif");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.生成（"无聊_动画.gif")!，cloudinary:云数据库）279x193 GIF（1.53 MB）Cloudinary的媒体管理服务支持上传、操作和管理各种媒体文件，包括图像、视频和音频到新兴媒体类型。下面的代码示例，实时数据采集系统，在所有流行的框架中，构建一个动态URL，将上面的动画GIF转换为动画WebP。此URL启用awebp标志（如果直接提供URL，则为fl廑awebp），并引用相同的图像，即无聊的动画，将其文件扩展名更改为.webp（这会告诉Cloudinary您要将图像转换为此文件格式）。URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/fl帴awebp/pored_animation.webpRuby：复制到剪贴板cl\u image_tag（"无聊_动画.webp"，：flags=>"awebp"）PHP:复制到剪贴板cl\u image_tag（"无聊_动画.webp，数组（"flags"=>"awebp"））Python:复制到剪贴板CloudinaryImage（"无聊_动画.webp"）.image（flags="awebp"）节点.js：复制到剪贴板cloudinary.image（"无聊_动画.webp"，{flags:"awebp"}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.flags（"awebp"））.imageTag（"无聊的"）_动画.webp");JS:复制到剪贴板cloudinary.imageTag（无聊的）_动画.webp'，{flags:"awebp"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"无聊_动画.webp"，{flags:"awebp"}）反应：复制到剪贴板转换"/>Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Flags（"awebp"））.BuildImageTag（"无聊的"）_动画.webp")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.flags（"awebp"））.generate（"无聊的_动画.webp");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setFlags（"awebp"））.generate（"无聊的_动画.webp")!，cloudinary:云数据库）279x193 WebP（419kb）注意：目前只有Chrome浏览器支持动画WebP。如果你在这里看到一个损坏的图片，试着用Chrome（v32或更高版本）打开这篇博文。上面的WebP动画是在动态URL被访问时由Cloudinary动态生成的。它看起来和原始图像一样，但是只有419KB重。这意味着我们节省了72%的文件大小，带宽和加载时间，而原来的1.5MB动画GIF.作者默认情况下，Cloudinary以有损模式生成动画WebP。用于上面动画WebP的默认质量级别是80%，但是您可以选择不同的质量级别。让我们尝试用较低的质量级别生成相同的动画WebP。我们将把quality参数设置为40（直接提供URL时q_40）。您可以在下面看到动态操作URL和产生的WebP动画。URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/fl帴awebp，q_40/钻孔_动画.webpRuby：复制到剪贴板cl\u image_tag（"无聊_动画.webp"，：flags=>"awebp"，：quality=>40）PHP:复制到剪贴板cl\u image_tag（"无聊_动画.webp，数组（"flags"=>"awebp"，"quality"=>40））Python:复制到剪贴板CloudinaryImage（"无聊_动画.webp）.image（flags="awebp"，质量=40）节点.js：复制到剪贴板cloudinary.image（"无聊_动画.webp，{flags:"awebp"，质量：40}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.flags（"awebp"）.quality（40））.imageTag（"无聊的_动画.webp");JS:复制到剪贴板cloudinary.imageTag（无聊的）_动画.webp'，{flags:"awebp"，质量：40}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"无聊_动画.webp，{flags:"awebp"，质量：40}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Flags（"awebp"）.Quality（40））.BuildImageTag（"无聊的_动画.webp")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.flags（"awebp"）.quality（40））.generate（"无聊的_动画.webp");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setFlags（"awebp"）.setQuality（40））.generate（"无聊的_动画.webp")!，cloudinary:云数据库）279x193 WebP（195 KB），质量设置为40%，视觉差异几乎不明显，但生成的文件仅重195KB。与80%质量的动画WebP相比，这节省了53%的大小和带宽，与原始GIF相比，大小减少了87%。调整和裁剪动画gif并转换为动画webpy您可以使用Cloudinary的图像处理url来裁剪和调整动画gif的大小。下面的操作URL和生成的图像生成了一个150x100的北填充矩形，该矩形是相同的动画GIF。生成的图像重429，其中Cloudinary已经应用了某些GIF动画优化KB.urlrubyphpythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w峎150，h_100，c帴fill，g帴北/钻孔_动画.gifRuby：复制到剪贴板cl\u image_tag（"无聊_动画.gif"，：width=>150，：height=>100，：gravity=>"北"，云服务器多少钱一年，：crop=>"fill"）PHP:复制到剪贴板cl\u image_tag（"无聊_动画.gif"，数组（"宽度"=>150，"高度"=>100，"重力"=>"北"，"裁剪"=>"填充"））Python:复制到剪贴板CloudinaryImage（"无聊_动画.gif"）.image（宽度=150，高度=100，重力="北"，家居智能化系统价格，裁剪="填充"）节点.js：复制到剪贴板cloudinary.image（"无聊_动画.gif"{垂直高度：100，填充宽度"Java:复制到剪贴板cloudinary.url（）.transformation（新转换（）.width（150）.height（100）.gravity（"north"）.crop（"fill"））.imageTag（"钻孔_动画.gif");JS:复制到剪贴板cloudinary.imageTag（无聊的）_动画.gif'，{width:150，height:100，重力："north"，crop:"fill"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"无聊_动画.gif，{宽度：150，高度：100，重力："北"，作物："填充"}）反应：复制到剪贴板