动画WEP-如何转换动画GIF到WEP并存达90%带宽

写由NadavSoferman 军士16-2014 6min读取

时装并非你期望技术世界重复的东西 — — 技术快速进步而难回圈子动画GIF插手的地方似乎90年代再次出现动画GIF无处不在, 并不仅仅出现在奇特而俗气的网址上-它们已成为主流短视频分享并播放动画GIFs像Gawker和TechCrunch

GIF格式远非最优使用简单化图像格式网络浏览器和智能手机支持视频转换动画GIF下载需要时间币游平台网页版官方播放时使用存储器和CPU资源相片分享网站、博客甚至新闻网站页面可变慢时,

GIF格式本非全色视频使用仅使用256色(无半透明alpha信道)并比照片或视频框架更适合绘图单图片框架JPEG质量和文件尺寸都好得多,但JPEG不支持动画

强竞争者替换动画GIF-GoogleWebP格式-新版WebP动画支持博客文章显示你如何使用云管理服务即时转换动画GIFWebP动画.并详细描述我们如何自动向辅助浏览器提供动画WebP文件,优雅地向动画GIF端端结果为全色高品质动画图像,重小得多,近似视觉与原动画GIF文件完全相同

动画GIF转换为动画WEP

下动画GIF一个无趣者上传维基百科.虽小于279x193,但视频短重1.5MB.网页上若有30张图像总计45MB 需要时间加载网页每日访问量达1000次, 光为这些图片每月带宽将达1.3TB

<\/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(\"bored_animation.gif\");","codeSnippet":"new CloudinaryImage(\"bored_animation.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(\"bored_animation.gif\");","codeSnippet":"new CloudinaryImage(\"bored_animation.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(\"bored_animation.gif\");","codeSnippet":"new CloudinaryImage(\"bored_animation.gif\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('bored_animation.gif').toHtml();","codeSnippet":"cloudinary.imageTag('bored_animation.gif').toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"bored_animation.gif\").image()","codeSnippet":"CloudinaryImage(\"bored_animation.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('bored_animation.gif'));","codeSnippet":"(new ImageTag('bored_animation.gif'));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"bored_animation.gif\")","codeSnippet":"cl_image_tag(\"bored_animation.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(\"bored_animation.gif\");","codeSnippet":"cloudinary.url().transformation(new Transformation().imageTag(\"bored_animation.gif\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"bored_animation.gif\")","codeSnippet":"cl_image_tag(\"bored_animation.gif\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.BuildImageTag(\"bored_animation.gif\")","codeSnippet":"cloudinary.Api.UrlImgUp.BuildImageTag(\"bored_animation.gif\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('bored_animation.gif').transformation(Transformation());","codeSnippet":"cloudinary.image('bored_animation.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(\"bored_animation.gif\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().generate(\"bored_animation.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(\"bored_animation.gif\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().generate(\"bored_animation.gif\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('bored_animation.gif').transformation(Transformation());","codeSnippet":"cloudinary.image('bored_animation.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(\"bored_animation.gif\") \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.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(\"bored_animation.gif\")","codeSnippet":"$.cloudinary.image(\"bored_animation.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(\"bored_animation.gif\");","codeSnippet":"new CloudinaryImage(\"bored_animation.gif\");","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/bored_animation.gif","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[],"transformation_string":"","url_suffix":"","version":"","secure":true,"public_id":"bored_animation.gif","extension":"gif","format":"gif","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

云端媒体管理服务支持上传、转换和管理各种媒体文件,包括图像、视频和音频传到新媒体类型下方代码样本在所有常用框架中构建动态URL,将上方动画GIF转换成动画WEPURL启动aweb标志或fl_aweb直接提供URL)并指同一张图像闲置安眠修改文件扩展.web向云形显示图像转换为此文件格式

注释 :动画WebP目前仅由 Chrome浏览器支持试打开Chrome博客文章v32或以上

上头WebP动画上方由云形生成时访问动态URL看上去和原创图像相同,但只称重419KB.表示我们保存72%文件大小、带宽和加载时间比较原创1.5MB动画GIF

默认云生成损耗模式动画WEP默认质量水平为80%,以上动画WebP使用,但可选择不同质量水平

尝试生成质量较低的相同的动画WBP定下质量问题参数到40q_40直接提供 URL时)可见动态变换URLWebP动画下方显示

<\/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(\"bored_animation.webp\")\n .transcode(toAnimated())\n .delivery(quality(40));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .transcode(toAnimated())\n .delivery(quality(40));","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(\"bored_animation.webp\")\n .transcode(toAnimated())\n .delivery(quality(40));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .transcode(toAnimated())\n .delivery(quality(40));","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(\"bored_animation.webp\")\n .transcode(toAnimated())\n .delivery(quality(40));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .transcode(toAnimated())\n .delivery(quality(40));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('bored_animation.webp', {flags: \"awebp\", quality: 40}).toHtml();","codeSnippet":"cloudinary.imageTag('bored_animation.webp', {flags: \"awebp\", quality: 40}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"bored_animation.webp\").image(flags=\"awebp\", quality=40)","codeSnippet":"CloudinaryImage(\"bored_animation.webp\").image(flags=\"awebp\", quality=40)","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('bored_animation.webp'))\n\t->transcode(Transcode::toAnimated())\n\t->delivery(Delivery::quality(40));","codeSnippet":"(new ImageTag('bored_animation.webp'))\n\t->transcode(Transcode::toAnimated())\n\t->delivery(Delivery::quality(40));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"bored_animation.webp\", array(\"flags\"=>\"awebp\", \"quality\"=>40))","codeSnippet":"cl_image_tag(\"bored_animation.webp\", array(\"flags\"=>\"awebp\", \"quality\"=>40))","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().flags(\"awebp\").quality(40)).imageTag(\"bored_animation.webp\");","codeSnippet":"cloudinary.url().transformation(new Transformation().flags(\"awebp\").quality(40)).imageTag(\"bored_animation.webp\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"bored_animation.webp\", :flags=>\"awebp\", :quality=>40)","codeSnippet":"cl_image_tag(\"bored_animation.webp\", :flags=>\"awebp\", :quality=>40)","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().Flags(\"awebp\").Quality(40)).BuildImageTag(\"bored_animation.webp\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\"awebp\").Quality(40)).BuildImageTag(\"bored_animation.webp\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('bored_animation.webp').transformation(Transformation()\n\t.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(40)));","codeSnippet":"cloudinary.image('bored_animation.webp').transformation(Transformation()\n\t.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(40)));","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().setFlags(\"awebp\").setQuality(40)).generate(\"bored_animation.webp\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\"awebp\").setQuality(40)).generate(\"bored_animation.webp\")!, 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().flags(\"awebp\").quality(40)).generate(\"bored_animation.webp\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().flags(\"awebp\").quality(40)).generate(\"bored_animation.webp\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('bored_animation.webp').transformation(Transformation()\n\t.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(40)));","codeSnippet":"cloudinary.image('bored_animation.webp').transformation(Transformation()\n\t.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(40)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.webp\")\n\t transcode(Transcode.toAnimated())\n\t delivery(Delivery.quality(40)) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.webp\")\n\t transcode(Transcode.toAnimated())\n\t delivery(Delivery.quality(40)) \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(\"bored_animation.webp\", {flags: \"awebp\", quality: 40})","codeSnippet":"$.cloudinary.image(\"bored_animation.webp\", {flags: \"awebp\", quality: 40})","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(\"bored_animation.webp\")\n .transcode(toAnimated())\n .delivery(quality(40));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .transcode(toAnimated())\n .delivery(quality(40));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/fl_awebp,q_40\/bored_animation.webp","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"flags":"awebp","quality":"40"}],"transformation_string":"fl_awebp,q_40","url_suffix":"","version":"","secure":true,"public_id":"bored_animation.webp","extension":"webp","format":"webp","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

质量集至40%时,视觉差几乎不可察觉,但生成文件只权重195KB.与80%质量动画WebP相比,这节省53%的大小带宽,并表示规模下降87%对比原创GIF

调整并裁剪动画GIFs并转换成动画WEP

可使用云化图像变换URL裁剪并调整动画GIF后续变换URL和生成图像生成同动画GIF北填矩形生成图像中云化应用某些动画GIF优化称429KB.

<\/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(\"bored_animation.gif\").resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n);","codeSnippet":"new CloudinaryImage(\"bored_animation.gif\").resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\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(\"bored_animation.gif\").resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n);","codeSnippet":"new CloudinaryImage(\"bored_animation.gif\").resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\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(\"bored_animation.gif\").resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n);","codeSnippet":"new CloudinaryImage(\"bored_animation.gif\").resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('bored_animation.gif', {width: 150, height: 100, gravity: \"north\", crop: \"fill\"}).toHtml();","codeSnippet":"cloudinary.imageTag('bored_animation.gif', {width: 150, height: 100, gravity: \"north\", 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(\"bored_animation.gif\").image(width=150, height=100, gravity=\"north\", crop=\"fill\")","codeSnippet":"CloudinaryImage(\"bored_animation.gif\").image(width=150, height=100, gravity=\"north\", 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('bored_animation.gif'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t);","codeSnippet":"(new ImageTag('bored_animation.gif'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\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(\"bored_animation.gif\", array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"crop\"=>\"fill\"))","codeSnippet":"cl_image_tag(\"bored_animation.gif\", array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"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(100).gravity(\"north\").crop(\"fill\")).imageTag(\"bored_animation.gif\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\"north\").crop(\"fill\")).imageTag(\"bored_animation.gif\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"bored_animation.gif\", :width=>150, :height=>100, :gravity=>\"north\", :crop=>\"fill\")","codeSnippet":"cl_image_tag(\"bored_animation.gif\", :width=>150, :height=>100, :gravity=>\"north\", :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(100).Gravity(\"north\").Crop(\"fill\")).BuildImageTag(\"bored_animation.gif\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\"north\").Crop(\"fill\")).BuildImageTag(\"bored_animation.gif\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('bored_animation.gif').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(100)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t));","codeSnippet":"cloudinary.image('bored_animation.gif').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(100)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\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\")).generate(\"bored_animation.gif\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\"north\").setCrop(\"fill\")).generate(\"bored_animation.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(100).gravity(\"north\").crop(\"fill\")).generate(\"bored_animation.gif\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\"north\").crop(\"fill\")).generate(\"bored_animation.gif\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('bored_animation.gif').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(100)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t));","codeSnippet":"cloudinary.image('bored_animation.gif').transformation(Transformation()\n\t.resize(Resize.fill().width(150)\n.height(100)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\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(\"bored_animation.gif\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.gif\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\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(\"bored_animation.gif\", {width: 150, height: 100, gravity: \"north\", crop: \"fill\"})","codeSnippet":"$.cloudinary.image(\"bored_animation.gif\", {width: 150, height: 100, gravity: \"north\", 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(\"bored_animation.gif\").resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n);","codeSnippet":"new CloudinaryImage(\"bored_animation.gif\").resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north\/bored_animation.gif","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"150","height":"100","crop_mode":"fill","gravity":"north"}],"transformation_string":"w_150,h_100,c_fill,g_north","url_suffix":"","version":"","secure":true,"public_id":"bored_animation.gif","extension":"gif","format":"gif","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

现在,我们可以转换图像动画WEPURL生成相同的 150x100缩略图,同时转换成有80%质量的动画WEP结果权重154KB表示我们保存64%文件大小,不影响质量

<\/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(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .transcode(toAnimated())\n .delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .transcode(toAnimated())\n .delivery(quality(80));","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(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .transcode(toAnimated())\n .delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .transcode(toAnimated())\n .delivery(quality(80));","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(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .transcode(toAnimated())\n .delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .transcode(toAnimated())\n .delivery(quality(80));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('bored_animation.webp', {width: 150, height: 100, gravity: \"north\", flags: \"awebp\", quality: 80, crop: \"fill\"}).toHtml();","codeSnippet":"cloudinary.imageTag('bored_animation.webp', {width: 150, height: 100, gravity: \"north\", flags: \"awebp\", quality: 80, 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(\"bored_animation.webp\").image(width=150, height=100, gravity=\"north\", flags=\"awebp\", quality=80, crop=\"fill\")","codeSnippet":"CloudinaryImage(\"bored_animation.webp\").image(width=150, height=100, gravity=\"north\", flags=\"awebp\", quality=80, 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('bored_animation.webp'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->transcode(Transcode::toAnimated())\n\t->delivery(Delivery::quality(80));","codeSnippet":"(new ImageTag('bored_animation.webp'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->transcode(Transcode::toAnimated())\n\t->delivery(Delivery::quality(80));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"bored_animation.webp\", array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"flags\"=>\"awebp\", \"quality\"=>80, \"crop\"=>\"fill\"))","codeSnippet":"cl_image_tag(\"bored_animation.webp\", array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"flags\"=>\"awebp\", \"quality\"=>80, \"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(100).gravity(\"north\").flags(\"awebp\").quality(80).crop(\"fill\")).imageTag(\"bored_animation.webp\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\"north\").flags(\"awebp\").quality(80).crop(\"fill\")).imageTag(\"bored_animation.webp\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"bored_animation.webp\", :width=>150, :height=>100, :gravity=>\"north\", :flags=>\"awebp\", :quality=>80, :crop=>\"fill\")","codeSnippet":"cl_image_tag(\"bored_animation.webp\", :width=>150, :height=>100, :gravity=>\"north\", :flags=>\"awebp\", :quality=>80, :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(100).Gravity(\"north\").Flags(\"awebp\").Quality(80).Crop(\"fill\")).BuildImageTag(\"bored_animation.webp\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\"north\").Flags(\"awebp\").Quality(80).Crop(\"fill\")).BuildImageTag(\"bored_animation.webp\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('bored_animation.webp').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.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(80)));","codeSnippet":"cloudinary.image('bored_animation.webp').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.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(80)));","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\").setFlags(\"awebp\").setQuality(80).setCrop(\"fill\")).generate(\"bored_animation.webp\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\"north\").setFlags(\"awebp\").setQuality(80).setCrop(\"fill\")).generate(\"bored_animation.webp\")!, 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\").flags(\"awebp\").quality(80).crop(\"fill\")).generate(\"bored_animation.webp\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\"north\").flags(\"awebp\").quality(80).crop(\"fill\")).generate(\"bored_animation.webp\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('bored_animation.webp').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.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(80)));","codeSnippet":"cloudinary.image('bored_animation.webp').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.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(80)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.webp\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t transcode(Transcode.toAnimated())\n\t delivery(Delivery.quality(80)) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.webp\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t transcode(Transcode.toAnimated())\n\t delivery(Delivery.quality(80)) \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(\"bored_animation.webp\", {width: 150, height: 100, gravity: \"north\", flags: \"awebp\", quality: 80, crop: \"fill\"})","codeSnippet":"$.cloudinary.image(\"bored_animation.webp\", {width: 150, height: 100, gravity: \"north\", flags: \"awebp\", quality: 80, 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(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .transcode(toAnimated())\n .delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .transcode(toAnimated())\n .delivery(quality(80));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,fl_awebp,q_80\/bored_animation.webp","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"150","height":"100","crop_mode":"fill","gravity":"north","flags":"awebp","quality":"80"}],"transformation_string":"w_150,h_100,c_fill,g_north,fl_awebp,q_80","url_suffix":"","version":"","secure":true,"public_id":"bored_animation.webp","extension":"webp","format":"webp","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

动画WebP格式对绘画动画非常有用,而不仅仅是视频下图显示维基媒体上传云形动画原生动左重GIF790KB右传WebP版本80%质量,仅权重375KB减法52.5%)

自动提供动画WebP仅对支持浏览器

希望我们成功显示动画WebP比动画GIF高得多问题在于只有Google Chrome浏览器32版或更高版支持这一格式Chrome为顶尖浏览器并强推升级超过60%的云内网站访问者使用chromev32或更高网站Chrome用户可能足够大, 有理由为WebP图像服务

挑战在于向支持浏览器用户提供WebP图像,向其他浏览器用户提供其他格式(GIF、PNG、JPG等)。向chrome v32或以上用户提供动画WebP,向所有其他用户提供动画GIF

云化可自动向每个用户发送适当的图像格式帮助使用浏览器(见我们的浏览器)。前一柱子深入讨论此特征)制作动画像下方图像时设置fack_format参数切换汽车或f_aut面向 URLs)云型自动检测CDN级用户浏览器并交付缓存优化转换WebP或原动画GIF

<\/Image>","codeSnippet":" \n\t magesstative:'''''''s's's's'sqive's's'sque's'sque's' <\/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(\"bored_animation.gif\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .delivery(format(auto()));","codeSnippet":"new CloudinaryImage(\"bored_animation.gif\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .delivery(format(auto()));","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(\"bored_animation.gif\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .delivery(format(auto()));","codeSnippet":"new CloudinaryImage(\"bored_animation.gif\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .delivery(format(auto()));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('bored_animation.gif', {width: 150, height: 100, gravity: \"north\", crop: \"fill\", fetchFormat: \"auto\"}).toHtml();","codeSnippet":"cloudinary.imageTag('bored_animation.gif', {width: 150, height: 100, gravity: \"north\", crop: \"fill\", fetchFormat: \"auto\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"bored_animation.gif\").image(width=150, height=100, gravity=\"north\", crop=\"fill\", fetch_format=\"auto\")","codeSnippet":"CloudinaryImage(\"bored_animation.gif\").image(width=150, height=100, gravity=\"north\", crop=\"fill\", fetch_format=\"auto\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('bored_animation.gif'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->delivery(Delivery::format(\n\tFormat::auto()));","codeSnippet":"(new ImageTag('bored_animation.gif'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->delivery(Delivery::format(\n\tFormat::auto()));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"bored_animation.gif\", array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"crop\"=>\"fill\", \"fetch_format\"=>\"auto\"))","codeSnippet":"cl_image_tag(\"bored_animation.gif\", array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"crop\"=>\"fill\", \"fetch_format\"=>\"auto\"))","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\").fetchFormat(\"auto\")).imageTag(\"bored_animation.gif\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\"north\").crop(\"fill\").fetchFormat(\"auto\")).imageTag(\"bored_animation.gif\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"bored_animation.gif\", :width=>150, :height=>100, :gravity=>\"north\", :crop=>\"fill\", :fetch_format=>:auto)","codeSnippet":"cl_image_tag(\"bored_animation.gif\", :width=>150, :height=>100, :gravity=>\"north\", :crop=>\"fill\", :fetch_format=>:auto)","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\").FetchFormat(\"auto\")).BuildImageTag(\"bored_animation.gif\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\"north\").Crop(\"fill\").FetchFormat(\"auto\")).BuildImageTag(\"bored_animation.gif\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('bored_animation.gif').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.delivery(Delivery.format(\n\tFormat.auto())));","codeSnippet":"cloudinary.image('bored_animation.gif').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.delivery(Delivery.format(\n\tFormat.auto())));","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\").setFetchFormat(\"auto\")).generate(\"bored_animation.gif\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\"north\").setCrop(\"fill\").setFetchFormat(\"auto\")).generate(\"bored_animation.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(100).gravity(\"north\").crop(\"fill\").fetchFormat(\"auto\")).generate(\"bored_animation.gif\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\"north\").crop(\"fill\").fetchFormat(\"auto\")).generate(\"bored_animation.gif\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('bored_animation.gif').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.delivery(Delivery.format(\n\tFormat.auto())));","codeSnippet":"cloudinary.image('bored_animation.gif').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.delivery(Delivery.format(\n\tFormat.auto())));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.gif\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t delivery(Delivery.format(\n\tFormat.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.gif\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t delivery(Delivery.format(\n\tFormat.auto())) \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(\"bored_animation.gif\", {width: 150, height: 100, gravity: \"north\", crop: \"fill\", fetch_format: \"auto\"})","codeSnippet":"$.cloudinary.image(\"bored_animation.gif\", {width: 150, height: 100, gravity: \"north\", crop: \"fill\", fetch_format: \"auto\"})","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(\"bored_animation.gif\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .delivery(format(auto()));","codeSnippet":"new CloudinaryImage(\"bored_animation.gif\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .delivery(format(auto()));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,f_auto\/bored_animation.gif","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"150","height":"100","crop_mode":"fill","gravity":"north","format":"auto"}],"transformation_string":"w_150,h_100,c_fill,g_north,f_auto","url_suffix":"","version":"","secure":true,"public_id":"bored_animation.gif","extension":"gif","format":"gif","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

动画WebP图片上进一步的变换

上方显示如何调整大小并裁剪云形图像可多变图像动画GIF或WEP下例使用云化图像转换URL环形动画GIF,添加灰色边框和半透明水印覆盖另一上传图像,并最后转换成动画WEPWebP格式生成视觉均匀结果,权重仅为GIF版本的35%65%大小带宽)

<\/Image>","codeSnippet":" \n\t \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(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .border(solid(3, \"#aaa\").roundCorners(byRadius(20)))\n .overlay(\n source(\n image(\"cloudinary_icon\").transformation(\n new Transformation()\n .resize(scale().width(0.8).relative())\n .adjust(opacity(50))\n )\n )\n )\n .transcode(toAnimated())\n .delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .border(solid(3, \"#aaa\").roundCorners(byRadius(20)))\n .overlay(\n source(\n image(\"cloudinary_icon\").transformation(\n new Transformation()\n .resize(scale().width(0.8).relative())\n .adjust(opacity(50))\n )\n )\n )\n .transcode(toAnimated())\n .delivery(quality(80));","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\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(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .border(solid(3, \"#aaa\").roundCorners(byRadius(20)))\n .overlay(\n source(\n image(\"cloudinary_icon\").transformation(\n new Transformation()\n .resize(scale().width(0.8).relative())\n .adjust(opacity(50))\n )\n )\n )\n .transcode(toAnimated())\n .delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .border(solid(3, \"#aaa\").roundCorners(byRadius(20)))\n .overlay(\n source(\n image(\"cloudinary_icon\").transformation(\n new Transformation()\n .resize(scale().width(0.8).relative())\n .adjust(opacity(50))\n )\n )\n )\n .transcode(toAnimated())\n .delivery(quality(80));","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-transformation> <\/cl-image>","codeSnippet":" \n\t \n\t<\/cl-transformation>\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(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .border(solid(3, \"#aaa\").roundCorners(byRadius(20)))\n .overlay(\n source(\n image(\"cloudinary_icon\").transformation(\n new Transformation()\n .resize(scale().width(0.8).relative())\n .adjust(opacity(50))\n )\n )\n )\n .transcode(toAnimated())\n .delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .border(solid(3, \"#aaa\").roundCorners(byRadius(20)))\n .overlay(\n source(\n image(\"cloudinary_icon\").transformation(\n new Transformation()\n .resize(scale().width(0.8).relative())\n .adjust(opacity(50))\n )\n )\n )\n .transcode(toAnimated())\n .delivery(quality(80));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('bored_animation.webp', {transformation: [ {width: 150, height: 100, gravity: \"north\", radius: 20, border: \"3px_solid_rgb:aaa\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"cloudinary_icon\"), flags: \"relative\", width: \"0.8\", opacity: 50}, {flags: \"awebp\", quality: 80} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('bored_animation.webp', {transformation: [\n {width: 150, height: 100, gravity: \"north\", radius: 20, border: \"3px_solid_rgb:aaa\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"cloudinary_icon\"), flags: \"relative\", width: \"0.8\", opacity: 50},\n {flags: \"awebp\", quality: 80}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"bored_animation.webp\").image(transformation=[ {'width': 150, 'height': 100, 'gravity': \"north\", 'radius': 20, 'border': \"3px_solid_rgb:aaa\", 'crop': \"fill\"}, {'overlay': \"cloudinary_icon\", 'flags': \"relative\", 'width': \"0.8\", 'opacity': 50}, {'flags': \"awebp\", 'quality': 80} ])","codeSnippet":"CloudinaryImage(\"bored_animation.webp\").image(transformation=[\n {'width': 150, 'height': 100, 'gravity': \"north\", 'radius': 20, 'border': \"3px_solid_rgb:aaa\", 'crop': \"fill\"},\n {'overlay': \"cloudinary_icon\", 'flags': \"relative\", 'width': \"0.8\", 'opacity': 50},\n {'flags': \"awebp\", 'quality': 80}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('bored_animation.webp'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->border(Border::solid(3,Color::rgb(\"aaa\"))\n\t->roundCorners(\n\tRoundCorners::byRadius(20))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"cloudinary_icon\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(0.8)\n\t->relative()\n\t)\n\t->adjust(Adjust::opacity(50)))\n\t))\n\t->transcode(Transcode::toAnimated())\n\t->delivery(Delivery::quality(80));","codeSnippet":"(new ImageTag('bored_animation.webp'))\n\t->resize(Resize::fill()->width(150)\n->height(100)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->border(Border::solid(3,Color::rgb(\"aaa\"))\n\t->roundCorners(\n\tRoundCorners::byRadius(20))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"cloudinary_icon\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(0.8)\n\t->relative()\n\t)\n\t->adjust(Adjust::opacity(50)))\n\t))\n\t->transcode(Transcode::toAnimated())\n\t->delivery(Delivery::quality(80));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"bored_animation.webp\", array(\"transformation\"=>array( array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"radius\"=>20, \"border\"=>\"3px_solid_rgb:aaa\", \"crop\"=>\"fill\"), array(\"overlay\"=>\"cloudinary_icon\", \"flags\"=>\"relative\", \"width\"=>\"0.8\", \"opacity\"=>50), array(\"flags\"=>\"awebp\", \"quality\"=>80) )))","codeSnippet":"cl_image_tag(\"bored_animation.webp\", array(\"transformation\"=>array(\n array(\"width\"=>150, \"height\"=>100, \"gravity\"=>\"north\", \"radius\"=>20, \"border\"=>\"3px_solid_rgb:aaa\", \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"cloudinary_icon\", \"flags\"=>\"relative\", \"width\"=>\"0.8\", \"opacity\"=>50),\n array(\"flags\"=>\"awebp\", \"quality\"=>80)\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\").radius(20).border(\"3px_solid_rgb:aaa\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"cloudinary_icon\")).flags(\"relative\").width(0.8).opacity(50).chain() .flags(\"awebp\").quality(80)).imageTag(\"bored_animation.webp\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(150).height(100).gravity(\"north\").radius(20).border(\"3px_solid_rgb:aaa\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"cloudinary_icon\")).flags(\"relative\").width(0.8).opacity(50).chain()\n .flags(\"awebp\").quality(80)).imageTag(\"bored_animation.webp\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"bored_animation.webp\", :transformation=>[ {:width=>150, :height=>100, :gravity=>\"north\", :radius=>20, :border=>\"3px_solid_rgb:aaa\", :crop=>\"fill\"}, {:overlay=>\"cloudinary_icon\", :flags=>\"relative\", :width=>0.8, :opacity=>50}, {:flags=>\"awebp\", :quality=>80} ])","codeSnippet":"cl_image_tag(\"bored_animation.webp\", :transformation=>[\n {:width=>150, :height=>100, :gravity=>\"north\", :radius=>20, :border=>\"3px_solid_rgb:aaa\", :crop=>\"fill\"},\n {:overlay=>\"cloudinary_icon\", :flags=>\"relative\", :width=>0.8, :opacity=>50},\n {:flags=>\"awebp\", :quality=>80}\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\").Radius(20).Border(\"3px_solid_rgb:aaa\").Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"cloudinary_icon\")).Flags(\"relative\").Width(0.8).Opacity(50).Chain() .Flags(\"awebp\").Quality(80)).BuildImageTag(\"bored_animation.webp\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(150).Height(100).Gravity(\"north\").Radius(20).Border(\"3px_solid_rgb:aaa\").Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"cloudinary_icon\")).Flags(\"relative\").Width(0.8).Opacity(50).Chain()\n .Flags(\"awebp\").Quality(80)).BuildImageTag(\"bored_animation.webp\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('bored_animation.webp').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.border(Border.solid(3,Color.rgb(\"aaa\"))\n\t.roundCorners(\n\tRoundCorners.byRadius(20))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"cloudinary_icon\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(0.8)\n\t.relative()\n\t)\n\t.adjust(Adjust.opacity(50)))\n\t))\n\t.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(80)));","codeSnippet":"cloudinary.image('bored_animation.webp').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.border(Border.solid(3,Color.rgb(\"aaa\"))\n\t.roundCorners(\n\tRoundCorners.byRadius(20))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"cloudinary_icon\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(0.8)\n\t.relative()\n\t)\n\t.adjust(Adjust.opacity(50)))\n\t))\n\t.transcode(Transcode.toAnimated())\n\t.delivery(Delivery.quality(80)));","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\").setRadius(20).setBorder(\"3px_solid_rgb:aaa\").setCrop(\"fill\").chain() .setOverlay(\"cloudinary_icon\").setFlags(\"relative\").setWidth(0.8).setOpacity(50).chain() .setFlags(\"awebp\").setQuality(80)).generate(\"bored_animation.webp\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(150).setHeight(100).setGravity(\"north\").setRadius(20).setBorder(\"3px_solid_rgb:aaa\").setCrop(\"fill\").chain()\n .setOverlay(\"cloudinary_icon\").setFlags(\"relative\").setWidth(0.8).setOpacity(50).chain()\n .setFlags(\"awebp\").setQuality(80)).generate(\"bored_animation.webp\")!, 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\").radius(20).border(\"3px_solid_rgb:aaa\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"cloudinary_icon\")).flags(\"relative\").width(0.8).opacity(50).chain() .flags(\"awebp\").quality(80)).generate(\"bored_animation.webp\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(150).height(100).gravity(\"north\").radius(20).border(\"3px_solid_rgb:aaa\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"cloudinary_icon\")).flags(\"relative\").width(0.8).opacity(50).chain()\n .flags(\"awebp\").quality(80)).generate(\"bored_animation.webp\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('bored_animation.webp').transformation(Transformation()\n\t.addTransformation(\"w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\/l_cloudinary_icon,fl_relative,w_0.8,o_50\/fl_awebp,q_80\"));","codeSnippet":"cloudinary.image('bored_animation.webp').transformation(Transformation()\n\t.addTransformation(\"w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\/l_cloudinary_icon,fl_relative,w_0.8,o_50\/fl_awebp,q_80\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.webp\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t border(Border.solid(3,Color.rgb(\"aaa\")) {\n\t roundCorners(\n\tRoundCorners.byRadius(20))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"cloudinary_icon\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(0.8F)\n\t relative()\n\t })\n\t adjust(Adjust.opacity(50)) })\n\t }))\n\t transcode(Transcode.toAnimated())\n\t delivery(Delivery.quality(80)) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"bored_animation.webp\")\n\t resize(Resize.fill() { width(150)\n height(100)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t border(Border.solid(3,Color.rgb(\"aaa\")) {\n\t roundCorners(\n\tRoundCorners.byRadius(20))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"cloudinary_icon\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(0.8F)\n\t relative()\n\t })\n\t adjust(Adjust.opacity(50)) })\n\t }))\n\t transcode(Transcode.toAnimated())\n\t delivery(Delivery.quality(80)) \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(\"bored_animation.webp\", {transformation: [ {width: 150, height: 100, gravity: \"north\", radius: 20, border: \"3px_solid_rgb:aaa\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"cloudinary_icon\"), flags: \"relative\", width: \"0.8\", opacity: 50}, {flags: \"awebp\", quality: 80} ]})","codeSnippet":"$.cloudinary.image(\"bored_animation.webp\", {transformation: [\n {width: 150, height: 100, gravity: \"north\", radius: 20, border: \"3px_solid_rgb:aaa\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"cloudinary_icon\"), flags: \"relative\", width: \"0.8\", opacity: 50},\n {flags: \"awebp\", quality: 80}\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(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .border(solid(3, \"#aaa\").roundCorners(byRadius(20)))\n .overlay(\n source(\n image(\"cloudinary_icon\").transformation(\n new Transformation()\n .resize(scale().width(0.8).relative())\n .adjust(opacity(50))\n )\n )\n )\n .transcode(toAnimated())\n .delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"bored_animation.webp\")\n .resize(\n fill()\n .width(150)\n .height(100)\n .gravity(compass(\"north\"))\n )\n .border(solid(3, \"#aaa\").roundCorners(byRadius(20)))\n .overlay(\n source(\n image(\"cloudinary_icon\").transformation(\n new Transformation()\n .resize(scale().width(0.8).relative())\n .adjust(opacity(50))\n )\n )\n )\n .transcode(toAnimated())\n .delivery(quality(80));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\/l_cloudinary_icon,fl_relative,w_0.8,o_50\/fl_awebp,q_80\/bored_animation.webp","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"150","height":"100","crop_mode":"fill","gravity":"north","radius":"20","border":"3px_solid_rgb:aaa"},{"overlay":"cloudinary_icon","flags":"relative","width":"0.8","opacity":"50"},{"flags":"awebp","quality":"80"}],"transformation_string":"w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\/l_cloudinary_icon,fl_relative,w_0.8,o_50\/fl_awebp,q_80","url_suffix":"","version":"","secure":true,"public_id":"bored_animation.webp","extension":"webp","format":"webp","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

摘要

从动画GIF转换动画WebP的结果给人深刻印象-从上举的例子看,图像尺寸和带宽下降65-90%,并产生相同的视觉结果webP仅供有限数浏览器使用,但最新版Chrome正变得越来越受欢迎,WebP的重要性正在上升。

云形自动转换并有选择地提供动画格式基于用户浏览器,绝对没有理由不使用动画WebP显示短视频再者,如果你将原创高质量视频转换为WebP(而不仅仅是从GIF转换为WebP像上文例子中我们所做的那样),你就会得到更好的视觉结果,因为WebP格式全色支持,相比之下动画GIF中只有256色

顺便说一下,我们谦卑地认为,目前充斥动画GIF并发的大型网站,都同时播放,通过显示动画的第一个静止框架并用小按钮实现更专业的结果云化系统很容易转换动画GIF或WebP动画面向单框架图像格式例举 :

<\/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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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('bored_animation.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('bored_animation.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(\"bored_animation.jpg\").image(transformation=[ {'width': 150, 'height': 100, 'gravity': \"north\", 'crop': \"fill\"}, {'overlay': \"play_button\", 'width': \"0.4\", 'flags': \"relative\", 'opacity': 60} ])","codeSnippet":"CloudinaryImage(\"bored_animation.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('bored_animation.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('bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"bored_animation.jpg\", :transformation=>[ {:width=>150, :height=>100, :gravity=>\"north\", :crop=>\"fill\"}, {:overlay=>\"play_button\", :width=>0.4, :flags=>\"relative\", :opacity=>60} ])","codeSnippet":"cl_image_tag(\"bored_animation.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(\"bored_animation.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(\"bored_animation.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('bored_animation.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('bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('bored_animation.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('bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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(\"bored_animation.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.agrosoland.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north\/l_play_button,w_0.4,fl_relative,o_60\/bored_animation.jpg","cloud_name":"demo","host":"res.www.agrosoland.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":"bored_animation.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

动画GIFs动态转换,即时转换Web和本文章描述的所有其他强图像转换优化功能可供云端用户使用,包括使用免费计划者使用搭建免费云式账号试一试我们非常欢迎您的反馈通过下文评论或你最喜欢的社交网络

动画WEP-如何转换动画GIF到WEP并存达90%带宽

动画GIF转换为动画WEP

调整并裁剪动画GIFs并转换成动画WEP

自动提供动画WebP仅对支持浏览器

动画WebP图片上进一步的变换

摘要

想要更多了解图片格式吗?

币游国际真人娱乐Livering云化与Flask:创建交互式图像平台

产品类

解决之道

开发者

公司

联系我们

动画GIF转换为动画WEP

调整并裁剪动画GIFs并转换成动画WEP

自动提供动画WebP仅对支持浏览器

动画WebP图片上进一步的变换

摘要

想要更多了解图片格式吗?

特征邮箱