压缩动画GIF并转换MWM或MP4

短消息视频播放动画GIF像野火在网络传播, 特别是在媒体和新闻网站,因为这些GIF不优化,它们的大小巨大,耗用重带宽并减慢页负载重构并变换大数动画GIF逐个匹配网站或应用图形设计是一个漫长的CPU密集过程

动画GIFs主要作为短视频使用,有效缩放文件尺寸的方法是将图像格式转换为现代视频格式,如WebM或MP4贝斯特登录入口官网下载后,您仍然可以显示相同的动画内容,但会少用带宽,加速页面加载并保存服务器资源所有现代浏览器支持HTML5 并嵌入短视频MP4或WBM

第一步是转换所有上传GIF视频并非所有浏览器都支持视频格式MP4或WBM容器格式只对特定浏览器有效表示你必须有选择地转换GIF格式供浏览器使用,这是一个严峻的挑战

寻找云管理图像服务动画GIFs自动转换MP4s或WebMs面向所有现代浏览器云性动态变换大小、作物并变换短视频以匹配网站设计

开始使用云端时先设置账号并上传图像到您的账号媒体库云化图像根据参数变换 动态URLs使用云化客户库中所有广受欢迎的开发框架很容易构建

自动转换动画GIF到WebM或MP4视频时设置格式化动态URL中的参数webm网站或mp4.高品质动画GIF上传到云内小猫打标识符 :

<\/Image>","codeSnippet":" \n\n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\");","codeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\");","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":" \n\n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\");","codeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\");","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-image>","codeSnippet":" \n\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\");","codeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('kitten_fighting.gif').toHtml();","codeSnippet":"cloudinary.imageTag('kitten_fighting.gif').toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"kitten_fighting.gif\").image()","codeSnippet":"CloudinaryImage(\"kitten_fighting.gif\").image()","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('kitten_fighting.gif'));","codeSnippet":"(new ImageTag('kitten_fighting.gif'));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"kitten_fighting.gif\")","codeSnippet":"cl_image_tag(\"kitten_fighting.gif\")","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().imageTag(\"kitten_fighting.gif\");","codeSnippet":"cloudinary.url().transformation(new Transformation().imageTag(\"kitten_fighting.gif\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"kitten_fighting.gif\")","codeSnippet":"cl_image_tag(\"kitten_fighting.gif\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.BuildImageTag(\"kitten_fighting.gif\")","codeSnippet":"cloudinary.Api.UrlImgUp.BuildImageTag(\"kitten_fighting.gif\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('kitten_fighting.gif').transformation(Transformation());","codeSnippet":"cloudinary.image('kitten_fighting.gif').transformation(Transformation());","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().generate(\"kitten_fighting.gif\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().generate(\"kitten_fighting.gif\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().generate(\"kitten_fighting.gif\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().generate(\"kitten_fighting.gif\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('kitten_fighting.gif').transformation(Transformation());","codeSnippet":"cloudinary.image('kitten_fighting.gif').transformation(Transformation());","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"kitten_fighting.gif\") \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"kitten_fighting.gif\") \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"kitten_fighting.gif\")","codeSnippet":"$.cloudinary.image(\"kitten_fighting.gif\")","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\");","codeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\");","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/kitten_fighting.gif","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[],"transformation_string":"","url_suffix":"","version":"","secure":true,"public_id":"kitten_fighting.gif","extension":"gif","format":"gif","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

微信6.3MBGIF需要很长时间加载设置格式(文件扩展)mp4动态转换GIF系统向MP4视频传递后云式缓存持久传递并传递到内容传输网络

https://res.www.aaaalireno.com/demo/image/upload/kitten_fighting.mp4

自动生成MP4视频称重311KB中唯一5%原创GIF大增带宽加载时间

将相同的GIF转换为WebM视频webm网站.下方视频由云形生成 只重467KB

https://res.www.aaaalireno.com/demo/image/upload/kitten_fighting.webm

常用用视频执行动画实践用Play按钮显示单框架,点击启动真视频云化可动态操作下图由云形转换成JPEG5.6KBa 150x100缩略图 半透明叠加前传Play按钮

<\/Image>","codeSnippet":" \n\t \n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.jpg\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .overlay(\n source(\n image(\"play_button\").transformation(\n new Transformation()\n .resize(scale().width(0.4).relative())\n .adjust(opacity(60))\n )\n )\n );","codeSnippet":"new CloudinaryImage(\"kitten_fighting.jpg\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .overlay(\n source(\n image(\"play_button\").transformation(\n new Transformation()\n .resize(scale().width(0.4).relative())\n .adjust(opacity(60))\n )\n )\n );","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":" \n\t \n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.jpg\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .overlay(\n source(\n image(\"play_button\").transformation(\n new Transformation()\n .resize(scale().width(0.4).relative())\n .adjust(opacity(60))\n )\n )\n );","codeSnippet":"new CloudinaryImage(\"kitten_fighting.jpg\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .overlay(\n source(\n image(\"play_button\").transformation(\n new Transformation()\n .resize(scale().width(0.4).relative())\n .adjust(opacity(60))\n )\n )\n );","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-transformation> <\/cl-image>","codeSnippet":" \n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.jpg\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .overlay(\n source(\n image(\"play_button\").transformation(\n new Transformation()\n .resize(scale().width(0.4).relative())\n .adjust(opacity(60))\n )\n )\n );","codeSnippet":"new CloudinaryImage(\"kitten_fighting.jpg\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .overlay(\n source(\n image(\"play_button\").transformation(\n new Transformation()\n .resize(scale().width(0.4).relative())\n .adjust(opacity(60))\n )\n )\n );","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('kitten_fighting.jpg', {transformation: [ {width: 150, height: 100, gravity: \"north\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"play_button\"), width: \"0.4\", flags: \"relative\", opacity: 60} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('kitten_fighting.jpg', {transformation: [\n {width: 150, height: 100, gravity: \"north\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"play_button\"), width: \"0.4\", flags: \"relative\", opacity: 60}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"kitten_fighting.jpg\").image(transformation=[ {'width': 150, 'height': 100, 'gravity': \"north\", 'crop': \"fill\"}, {'overlay': \"play_button\", 'width': \"0.4\", 'flags': \"relative\", 'opacity': 60} ])","codeSnippet":"CloudinaryImage(\"kitten_fighting.jpg\").image(transformation=[\n {'width': 150, 'height': 100, 'gravity': \"north\", 'crop': \"fill\"},\n {'overlay': \"play_button\", 'width': \"0.4\", 'flags': \"relative\", 'opacity': 60}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('kitten_fighting.jpg'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"play_button\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(0.4)\n\t->relative()\n\t)\n\t->adjust(Adjust::opacity(60)))\n\t));","codeSnippet":"(new ImageTag('kitten_fighting.jpg'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"play_button\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(0.4)\n\t->relative()\n\t)\n\t->adjust(Adjust::opacity(60)))\n\t));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"kitten_fighting.jpg\", array(\"transformation\"=>array( array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"crop\"=>\"fill\"), array(\"overlay\"=>\"play_button\", \"width\"=>\"0.4\", \"flags\"=>\"relative\", \"opacity\"=>60) )))","codeSnippet":"cl_image_tag(\"kitten_fighting.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"play_button\", \"width\"=>\"0.4\", \"flags\"=>\"relative\", \"opacity\"=>60)\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\"north\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"play_button\")).width(0.4).flags(\"relative\").opacity(60)).imageTag(\"kitten_fighting.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(150).height(100).gravity(\"north\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"play_button\")).width(0.4).flags(\"relative\").opacity(60)).imageTag(\"kitten_fighting.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"kitten_fighting.jpg\", :transformation=>[ {:width=>150, :height=>100, :gravity=>\"north\", :crop=>\"fill\"}, {:overlay=>\"play_button\", :width=>0.4, :flags=>\"relative\", :opacity=>60} ])","codeSnippet":"cl_image_tag(\"kitten_fighting.jpg\", :transformation=>[\n {:width=>150, :height=>100, :gravity=>\"north\", :crop=>\"fill\"},\n {:overlay=>\"play_button\", :width=>0.4, :flags=>\"relative\", :opacity=>60}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\"north\").Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"play_button\")).Width(0.4).Flags(\"relative\").Opacity(60)).BuildImageTag(\"kitten_fighting.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(150).Height(100).Gravity(\"north\").Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"play_button\")).Width(0.4).Flags(\"relative\").Opacity(60)).BuildImageTag(\"kitten_fighting.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('kitten_fighting.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(100)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"play_button\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(0.4)\n\t.relative()\n\t)\n\t.adjust(Adjust.opacity(60)))\n\t)));","codeSnippet":"cloudinary.image('kitten_fighting.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(100)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"play_button\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(0.4)\n\t.relative()\n\t)\n\t.adjust(Adjust.opacity(60)))\n\t)));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\"north\").setCrop(\"fill\").chain() .setOverlay(\"play_button\").setWidth(0.4).setFlags(\"relative\").setOpacity(60)).generate(\"kitten_fighting.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(150).setHeight(100).setGravity(\"north\").setCrop(\"fill\").chain()\n .setOverlay(\"play_button\").setWidth(0.4).setFlags(\"relative\").setOpacity(60)).generate(\"kitten_fighting.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\"north\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"play_button\")).width(0.4).flags(\"relative\").opacity(60)).generate(\"kitten_fighting.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(150).height(100).gravity(\"north\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"play_button\")).width(0.4).flags(\"relative\").opacity(60)).generate(\"kitten_fighting.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('kitten_fighting.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(100)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"play_button\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(0.4)\n\t.relative()\n\t)\n\t.adjust(Adjust.opacity(60)))\n\t)));","codeSnippet":"cloudinary.image('kitten_fighting.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(100)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"play_button\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(0.4)\n\t.relative()\n\t)\n\t.adjust(Adjust.opacity(60)))\n\t)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"kitten_fighting.jpg\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"play_button\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(0.4F)\n\t relative()\n\t })\n\t adjust(Adjust.opacity(60)) })\n\t })) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"kitten_fighting.jpg\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"play_button\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(0.4F)\n\t relative()\n\t })\n\t adjust(Adjust.opacity(60)) })\n\t })) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"kitten_fighting.jpg\", {transformation: [ {width: 150, height: 100, gravity: \"north\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"play_button\"), width: \"0.4\", flags: \"relative\", opacity: 60} ]})","codeSnippet":"$.cloudinary.image(\"kitten_fighting.jpg\", {transformation: [\n {width: 150, height: 100, gravity: \"north\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"play_button\"), width: \"0.4\", flags: \"relative\", opacity: 60}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.jpg\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .overlay(\n source(\n image(\"play_button\").transformation(\n new Transformation()\n .resize(scale().width(0.4).relative())\n .adjust(opacity(60))\n )\n )\n );","codeSnippet":"new CloudinaryImage(\"kitten_fighting.jpg\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .overlay(\n source(\n image(\"play_button\").transformation(\n new Transformation()\n .resize(scale().width(0.4).relative())\n .adjust(opacity(60))\n )\n )\n );","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north\/l_play_button,w_0.4,fl_relative,o_60\/kitten_fighting.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"150","height":"100","crop_mode":"fill","gravity":"north"},{"overlay":"play_button","width":"0.4","flags":"relative","opacity":"60"}],"transformation_string":"w_150,h_100,c_fill,g_north\/l_play_button,w_0.4,fl_relative,o_60","url_suffix":"","version":"","secure":true,"public_id":"kitten_fighting.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

用户可能上传到网站相片和动画上方位和方位比和大多数网站和移动应用一样,你必须调整并裁剪内容与网站设计匹配,例如为所有用户加载动画创建统一的平方缩略图

云化通过动态变换和交付URL可调整云中GIF大小并种植动画URL创建 150x150中心编译并重裁原创缩略图

<\/Image>","codeSnippet":" \n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\").resize(\n fill().width(150).height(150)\n);","codeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\").resize(\n fill().width(150).height(150)\n);","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":" \n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\").resize(\n fill().width(150).height(150)\n);","codeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\").resize(\n fill().width(150).height(150)\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \n\t \n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\").resize(\n fill().width(150).height(150)\n);","codeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\").resize(\n fill().width(150).height(150)\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('kitten_fighting.gif', {width: 150, height: 150, crop: \"fill\"}).toHtml();","codeSnippet":"cloudinary.imageTag('kitten_fighting.gif', {width: 150, height: 150, crop: \"fill\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"kitten_fighting.gif\").image(width=150, height=150, crop=\"fill\")","codeSnippet":"CloudinaryImage(\"kitten_fighting.gif\").image(width=150, height=150, crop=\"fill\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('kitten_fighting.gif'))\n\t->resize(Resize::fill()->width(150)\n->height(150));","codeSnippet":"(new ImageTag('kitten_fighting.gif'))\n\t->resize(Resize::fill()->width(150)\n->height(150));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"kitten_fighting.gif\", array(\"width\"=>150, \"height\"=>150, \"crop\"=>\"fill\"))","codeSnippet":"cl_image_tag(\"kitten_fighting.gif\", array(\"width\"=>150, \"height\"=>150, \"crop\"=>\"fill\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(150).height(150).crop(\"fill\")).imageTag(\"kitten_fighting.gif\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(150).height(150).crop(\"fill\")).imageTag(\"kitten_fighting.gif\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"kitten_fighting.gif\", :width=>150, :height=>150, :crop=>\"fill\")","codeSnippet":"cl_image_tag(\"kitten_fighting.gif\", :width=>150, :height=>150, :crop=>\"fill\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Crop(\"fill\")).BuildImageTag(\"kitten_fighting.gif\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Crop(\"fill\")).BuildImageTag(\"kitten_fighting.gif\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('kitten_fighting.gif').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(150)));","codeSnippet":"cloudinary.image('kitten_fighting.gif').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(150)));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setCrop(\"fill\")).generate(\"kitten_fighting.gif\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setCrop(\"fill\")).generate(\"kitten_fighting.gif\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(150).height(150).crop(\"fill\")).generate(\"kitten_fighting.gif\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(150).height(150).crop(\"fill\")).generate(\"kitten_fighting.gif\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('kitten_fighting.gif').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(150)));","codeSnippet":"cloudinary.image('kitten_fighting.gif').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(150)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"kitten_fighting.gif\")\n\t resize(Resize.fill() { width(150)\n height(150) }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"kitten_fighting.gif\")\n\t resize(Resize.fill() { width(150)\n height(150) }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"kitten_fighting.gif\", {width: 150, height: 150, crop: \"fill\"})","codeSnippet":"$.cloudinary.image(\"kitten_fighting.gif\", {width: 150, height: 150, crop: \"fill\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\").resize(\n fill().width(150).height(150)\n);","codeSnippet":"new CloudinaryImage(\"kitten_fighting.gif\").resize(\n fill().width(150).height(150)\n);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/w_150,h_150,c_fill\/kitten_fighting.gif","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"150","height":"150","crop_mode":"fill"}],"transformation_string":"w_150,h_150,c_fill","url_suffix":"","version":"","secure":true,"public_id":"kitten_fighting.gif","extension":"gif","format":"gif","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

上方高质量动画GIF仍然称重2.5MB似乎超模小图像动画GIF转换WebM或MP4视频导致文件小得多,同时保持相同的视觉质量文件扩展集mp4URL动态创建相同的 150x150,裁剪版动画,同时转换成MP4视频格式生成MP4看起来很好,只权重106KB大小缩放96%.

https://res.www.aaaalireno.com/demo/image/upload/w_150,h_150,c_fill/kitten_fighting.mp4

并非所有浏览器支持所有视频格式Chrome支持MP4和WBMfirefox,只有WBM和互联网探索者,仅MP4然而HTML5 标签,用它为同段视频指定多源类型,在大多数现代浏览器中有效表示您可以同时指定动态云式URL, 即动画转换为MP4和替代URL转换动画WBM之后浏览器会用支持格式播放视频

下HTML片段创建320x180自播放 标签说明MP4和WebM URLs除静态框架JPEG招贴还包括替代内容连接原创GIF

        <视频播放宽度=320高度显示=180自动播放循环式静音=嵌入式招贴画="https://res.www.aaaalireno.com/demo/image/upload/kitten_fighting.jpg"><源码类型=视频/mp4src系统="//www.aaaalireno.com/res/demo/image/upload/kitten_fighting.mp4"><源码类型=视频/网络src系统="//www.aaaalireno.com/res/demo/image/upload/kitten_fighting.webm">浏览器不支持HTML5视频标签<a/href="//www.aaaalireno.com/res/demo/image/upload/kitten_fighting.gif">点击这里查看原创GIF
           a/>
          视频播放>代码语言htmlXML高山市xml)

贝斯特登录入口官网下载重整和裁剪动画GIF系统是在线媒体的重要组成部分,需要大量的带宽和服务器资源。取而代之的是转换上传动画GIF视频,这些视频提供相同的视觉质量以大大降低带宽、加速加载和增强用户经验

云化分三步实现云自动化处理转换

1. 动画GIF转换为MP4s和Webms
2. 变大小、裁剪和变换第1步生成视频
3. 优化变换视频快速CDN

动画GIF转换MP4和WebMs以及其他所有变换能力都存有云式规划,包括云式规划自由级.我们欢迎您的反馈

---

• 视频编码转换
• 十大错误处理网站视频和解决方式
• 如何用单行代码自动压缩视频尺寸
• Exoplayer Android教程:易视频传送编辑
• 终极HTML5视频播放器秀:10名玩家比较
• 如何从音频文件生成波形图像
• 自动创业子标题基于视频轨迹
• 自动生成视频预览并有巨大效果
• HLS适配流HTML5视频标签
• 视频优化HTML5+#Viote>播放器
• Android视频转换为动画GIF云式图像:教程