基于GIF的短动画视频序列似乎像野火一样在网络媒体新闻网站显示短视频片段，社交应用允许用户与朋友分享动画GIF，淘客家园，虽然过时的GIF动画格式非常有用，它有一个明显的缺点，那就是它庞大的文件大小。动画gif没有针对捕获的视频进行优化，从而导致文件大、带宽利用率高、加载时间慢和次优的用户体验。此外，调整和操作动画gif以匹配你的网站或应用程序的图形设计可能是一个漫长的、占用大量cpu的过程，因为它由几十个甚至几百个单独操作的帧组成。网络研讨会鉴于动画gif现在主要用于短视频，为什么不使用现代视频格式来减小动画gif的大小呢？所有现代浏览器都支持HTML5视频标签，将短视频嵌入MP4或WebM将允许您显示相同的动画内容，同时消耗更少的带宽，提高页面加载时间并节省计算资源服务器。但是，在将动画gif嵌入为现代视频格式之前，首先需要转换所有上传的GIF文件为视频文件格式。并非所有浏览器都支持所有的视频格式——有些浏览器只支持MP4容器格式，而其他浏览器则支持WebM容器格式。您需要有选择地将动画gif转换为适合用户的格式浏览器.云数据库其基于云的图像管理服务解决了这些挑战——它执行从动画GIF到MP4和WebM格式的自动转换，以减少动画GIF的大小，同时支持所有现代浏览器。Cloudinary还有助于动态调整大小、裁剪和操作这些短视频以匹配您的图形设计。转换从动画GIF到MP4和WebM videosCloudinary是一种基于云的图像管理服务，淘客查询，允许您直接从浏览器或移动应用程序将图像上载到云端。上传文件后，您可以使用动态URL访问它，Cloudinary可以根据您在URL中定义的参数动态执行图像操作（您可以使用我们针对所有流行开发框架的客户端库轻松构建这些动态URL）。您的用户或员工可以将动画GIF上载到Cloudinary，然后在动态URL，您可以将格式设置为webm或mp4，以自动将原始动画图像转换为现代视频格式。For例如，下面的动画GIF被上传到Cloudinary并分配了kitten_fighting标识符。URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/kitten_fighting.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:云数据库）这个高质量的GIF重达6.3MB，相当大，下载需要时间。如果你的网站有很多这样大的动画文件，它将加载缓慢，这对用户有负面影响经验。设置"格式为mp4"可将原始GIF动态转换为mp4视频格式。生成的图像被持久缓存并通过CDN:复制到clipb公司oardhttps://res.cloudinary.com/demo/image/upload/kitten_fighting.mp4自动生成的MP4视频重达311KB，仅为原始GIF的5%。这意味着您可以节省95%的带宽和加载时间，同时向您的正在转换用户对于WebM视频格式，也可以通过将格式设置为WebM来完成。下面显示的自动生成的视频重量只有467KB。复制到clipboardhttps://res.cloudinary.com/demo/image/upload/kitten_fighting.webm如果决定使用视频文件显示动画，则可能希望使用"播放"按钮显示单个帧；单击"播放"按钮将启动实际的视频。Cloudinary可以动态地做到这一点——下面的图片是一个150x100的缩略图，上面覆盖了之前上传的播放按钮图像。缩略图转换为JPG格式，重量仅为5.6KB.urlrubyphpythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w峎150，h_100，c_fill，g峎u north/l_play_按钮，w_0.4，fl_relative，o_60/小猫_战斗.jpgRuby：复制到剪贴板cl\u image_tag（"小猫_战斗.jpg"，：转换=>[{重力=>"高度=>"北"/>，{:overlay=>"播放按钮"，：width=>0.4，：flags=>"相对"，：opacity=>60}])PHP:复制到剪贴板cl\u image_tag（"小猫_战斗.jpg，数组（"transformation"=>数组(数组（"width"=>150，"height"=>100，"gravity"=>"north"，"crop"=>"fill"），数组（"overlay"=>"播放按钮"，"width"=>0.4，"flags"=>"relative"，"opacity"=>60）)))Python:复制到剪贴板CloudinaryImage（"小猫_战斗.jpg"）。图像（转换=[{'width'：150，'height'：100，'gravity'："north"，'crop'："fill"}，大数据app，{'overlay'："播放按钮"，"宽度"：0.4，'flags'："相对"，"不透明度"：60}])节点.js：复制到剪贴板cloudinary.image（"小猫_战斗.jpg"，{转换：[{宽度：150，高度：100，重力："北"，作物："填充"}，{覆盖："播放按钮"，宽度："0.4"，标志："相对"，不透明度：60}]})Java:复制到剪贴板cloudinary.url（）.转换（新转换（）.width（150）.height（100）.重力（"north"）.crop（"fill"）.chain（）.overlay（new Layer（）.publicId（"播放按钮"））.width（0.4）.flags（"相对"）.opacity（60））.imageTag（"小猫_战斗.jpg");JS:复制到剪贴板cloudinary.imageTag（"小猫_战斗.jpg'，{转换：[{宽度：150，高度：100，重力："北"，作物："填充"}，{覆盖：新建云层（）.publicId（"播放按钮"），宽度："0.4"，标志："相对"，不透明度：60}]}).toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"小猫_战斗.jpg"，{转换：[{宽度：150，高度：100，重力："北"，作物："填充"}，{覆盖：新建云层（）.publicId（"播放按钮"），宽度："0.4"，标志："相对"，不透明度：60}]})反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（新转换（）.Width（150）.Height（100）.重力（"north"）.Crop（"fill"）.Chain（）.Overlay（new Layer（）.PublicId（"播放按钮"））.Width（0.4）.Flags（"相对"）.Opacity（60））.BuildImageTag（"小猫_战斗.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新转换（）.width（150）.height（100）.重力（"north"）.crop（"fill"）.chain（）.overlay（new Layer（）.publicId（"play_button"））.width（0.4）.flags（"相对"）.opacity（60））.generate（"小猫_战斗.jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setWidth（150）.setHeight（100）.setGravity（"北"）.setCrop（"填充"）.chain（）.setOverlay（"播放按钮"）.setWidth（0.4）.setFlags（"相对"）.setOpacity（60））.generate（"小猫_战斗.jpg")!，cloudinary:云数据库）调整和裁剪动画gif并转换为视频用户可以上传不同尺寸和高宽比的照片和动画。大多数网站和移动应用程序需要调整和裁剪用户上传的内容，以匹配其图形设计。例如，您可能需要为所有上传的内容创建一个统一的方形缩略图动画。云端可以使用动态操作和交付URL在云中调整和裁剪动画gif。以下示例创建原始动画的150x150居中裁剪和调整大小的缩略图GIF:urlrubyphpythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w峎150，淘客商城，h·U 150，c·fill/小猫_格斗。吉芙比：复制到剪贴板cl\u image_tag（"小猫_战斗.gif"，：width=>150，：height=>150，：crop=>"fill"）PHP:复制到剪贴板cl\u image_tag（"小猫_战斗.gif"，数组（"宽度"=>150，云服务器服务器，"高度"=>150，"裁剪"=>"填充"））Python:复制到剪贴板CloudinaryImage（"小猫_战斗.gif"）.image（宽度=150，高度=150，裁剪="填充"）节点.js：复制到剪贴板cloudinary.image（"小猫_战斗.gif"，{width:150，height:150，裁剪："fill"}）Java:复制到剪贴板cloudinary.url.kitten（".kitten（））.new转换.kitten（"150"）_战斗.gif");JS:复制到剪贴板cloudinary.imageTag（"小猫_战斗.gif'，{width:150，height:150，裁剪："fill"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"小猫_战斗.gif"，{宽度：