主机优化化网站移动开发者挑战是如何向访问者显示足够高质量图像,同时最小化图像文件大小较小图像文件大小可加速加载时间减带宽成本提高用户经验问题在于文件尺寸过小可能导致图像质量下降并可能损及访问者满意度提供最优图像并保持大小质量之间的适当平衡可能相当难办。
某些格式类AVIF,WebP并JPEG-2000JPEG标准格式提供Web图像效率更高,但并非所有浏览器都支持结果是向访问者提供最佳图像取决于他们使用哪个浏览器
云形系统能自动检测浏览器请求图像并选择最高效图像格式交付刚加fack_format参数并设置值汽车高山市f_aut内URLs)
下示例显示2个样本图片第一张图像使用无云性URLf_aut并因此以JPEG格式在所有浏览器中传递(同时按空向300px宽度缩放并保留方位比)。第二图像包含f_aut交付URL等14.6KB省56.5%)WebP16.1KB52%储蓄)或JPEG-200021.0k37%存到支持浏览器
<\/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(\"docs\/shoes.jpg\")\n .resize(scale().width(300))\n .delivery(format(auto()));","codeSnippet":"new CloudinaryImage(\"docs\/shoes.jpg\")\n .resize(scale().width(300))\n .delivery(format(auto()));","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(\"docs\/shoes.jpg\")\n .resize(scale().width(300))\n .delivery(format(auto()));","codeSnippet":"new CloudinaryImage(\"docs\/shoes.jpg\")\n .resize(scale().width(300))\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(\"docs\/shoes.jpg\")\n .resize(scale().width(300))\n .delivery(format(auto()));","codeSnippet":"new CloudinaryImage(\"docs\/shoes.jpg\")\n .resize(scale().width(300))\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('docs\/shoes.jpg', {width: 300, fetchFormat: \"auto\", crop: \"scale\"}).toHtml();","codeSnippet":"cloudinary.imageTag('docs\/shoes.jpg', {width: 300, fetchFormat: \"auto\", crop: \"scale\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"docs\/shoes.jpg\").image(width=300, fetch_format=\"auto\", crop=\"scale\")","codeSnippet":"CloudinaryImage(\"docs\/shoes.jpg\").image(width=300, fetch_format=\"auto\", crop=\"scale\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('docs\/shoes.jpg'))\n\t->resize(Resize::scale()->width(300))\n\t->delivery(Delivery::format(\n\tFormat::auto()));","codeSnippet":"(new ImageTag('docs\/shoes.jpg'))\n\t->resize(Resize::scale()->width(300))\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(\"docs\/shoes.jpg\", array(\"width\"=>300, \"fetch_format\"=>\"auto\", \"crop\"=>\"scale\"))","codeSnippet":"cl_image_tag(\"docs\/shoes.jpg\", array(\"width\"=>300, \"fetch_format\"=>\"auto\", \"crop\"=>\"scale\"))","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(300).fetchFormat(\"auto\").crop(\"scale\")).imageTag(\"docs\/shoes.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(300).fetchFormat(\"auto\").crop(\"scale\")).imageTag(\"docs\/shoes.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"docs\/shoes.jpg\", :width=>300, :fetch_format=>:auto, :crop=>\"scale\")","codeSnippet":"cl_image_tag(\"docs\/shoes.jpg\", :width=>300, :fetch_format=>:auto, :crop=>\"scale\")","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(300).FetchFormat(\"auto\").Crop(\"scale\")).BuildImageTag(\"docs\/shoes.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).FetchFormat(\"auto\").Crop(\"scale\")).BuildImageTag(\"docs\/shoes.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('docs\/shoes.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(300))\n\t.delivery(Delivery.format(\n\tFormat.auto())));","codeSnippet":"cloudinary.image('docs\/shoes.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(300))\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(300).setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"docs\/shoes.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"docs\/shoes.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(300).fetchFormat(\"auto\").crop(\"scale\")).generate(\"docs\/shoes.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(300).fetchFormat(\"auto\").crop(\"scale\")).generate(\"docs\/shoes.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('docs\/shoes.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(300))\n\t.delivery(Delivery.format(\n\tFormat.auto())));","codeSnippet":"cloudinary.image('docs\/shoes.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(300))\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(\"docs\/shoes.jpg\")\n\t resize(Resize.scale() { width(300) })\n\t delivery(Delivery.format(\n\tFormat.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/shoes.jpg\")\n\t resize(Resize.scale() { width(300) })\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(\"docs\/shoes.jpg\", {width: 300, fetch_format: \"auto\", crop: \"scale\"})","codeSnippet":"$.cloudinary.image(\"docs\/shoes.jpg\", {width: 300, fetch_format: \"auto\", crop: \"scale\"})","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(\"docs\/shoes.jpg\")\n .resize(scale().width(300))\n .delivery(format(auto()));","codeSnippet":"new CloudinaryImage(\"docs\/shoes.jpg\")\n .resize(scale().width(300))\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_300,f_auto\/docs\/shoes.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"300","format":"auto"}],"transformation_string":"w_300,f_auto","url_suffix":"","version":null,"secure":true,"public_id":"docs\/shoes.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
上例显示自动格式选择先上传云形图像,或使用服务器代码上传API,或直接从访问者浏览器或移动应用
Cloudinary除直接上传外,还支持通过公共URL取图像,转换这些实时图像并交付通过CDN优化生成图像举个例子,这意味着您可以很容易地将云化与网站整合而无需修改您的基础设施和代码简单前缀图像URL
云形自动格式特征也可以动态转换并传送远程图像并改进网站性能
举例说, URL提供Dwayne Johnson图片取自远程Wikimedia公共HTTP URL远程图像由云端提取,持续存储云中,按用户浏览器的要求动态转换为AVIF、WebP或JPEG-2000,通过高端CDN交付优化缓存
<\/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(\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\"\n)\n .resize(scale().width(300))\n .delivery(format(auto()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\"\n)\n .resize(scale().width(300))\n .delivery(format(auto()))\n .setDeliveryType(\"fetch\");","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(\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\"\n)\n .resize(scale().width(300))\n .delivery(format(auto()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\"\n)\n .resize(scale().width(300))\n .delivery(format(auto()))\n .setDeliveryType(\"fetch\");","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(\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\"\n)\n .resize(scale().width(300))\n .delivery(format(auto()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\"\n)\n .resize(scale().width(300))\n .delivery(format(auto()))\n .setDeliveryType(\"fetch\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg', {width: 300, fetchFormat: \"auto\", crop: \"scale\", type: \"fetch\"}).toHtml();","codeSnippet":"cloudinary.imageTag('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg', {width: 300, fetchFormat: \"auto\", crop: \"scale\", type: \"fetch\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\").image(width=300, fetch_format=\"auto\", crop=\"scale\", type=\"fetch\")","codeSnippet":"CloudinaryImage(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\").image(width=300, fetch_format=\"auto\", crop=\"scale\", type=\"fetch\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg'))\n\t->resize(Resize::scale()->width(300))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->deliveryType(\"fetch\");","codeSnippet":"(new ImageTag('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg'))\n\t->resize(Resize::scale()->width(300))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->deliveryType(\"fetch\");","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\", array(\"width\"=>300, \"fetch_format\"=>\"auto\", \"crop\"=>\"scale\", \"type\"=>\"fetch\"))","codeSnippet":"cl_image_tag(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\", array(\"width\"=>300, \"fetch_format\"=>\"auto\", \"crop\"=>\"scale\", \"type\"=>\"fetch\"))","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(300).fetchFormat(\"auto\").crop(\"scale\")).type(\"fetch\").imageTag(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(300).fetchFormat(\"auto\").crop(\"scale\")).type(\"fetch\").imageTag(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\", :width=>300, :fetch_format=>:auto, :crop=>\"scale\", :type=>\"fetch\")","codeSnippet":"cl_image_tag(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\", :width=>300, :fetch_format=>:auto, :crop=>\"scale\", :type=>\"fetch\")","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(300).FetchFormat(\"auto\").Crop(\"scale\")).Action(\"fetch\").BuildImageTag(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).FetchFormat(\"auto\").Crop(\"scale\")).Action(\"fetch\").BuildImageTag(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(300))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(300))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.setDeliveryType(\"fetch\"));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setType( \"fetch\").setTransformation(CLDTransformation().setWidth(300).setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setType( \"fetch\").setTransformation(CLDTransformation().setWidth(300).setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.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(300).fetchFormat(\"auto\").crop(\"scale\")).type(\"fetch\").generate(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(300).fetchFormat(\"auto\").crop(\"scale\")).type(\"fetch\").generate(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(300))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(300))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.setDeliveryType(\"fetch\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\")\n\t resize(Resize.scale() { width(300) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t deliveryType(\"fetch\") \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\")\n\t resize(Resize.scale() { width(300) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t deliveryType(\"fetch\") \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(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\", {width: 300, fetch_format: \"auto\", crop: \"scale\", type: \"fetch\"})","codeSnippet":"$.cloudinary.image(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\", {width: 300, fetch_format: \"auto\", crop: \"scale\", type: \"fetch\"})","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(\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\"\n)\n .resize(scale().width(300))\n .delivery(format(auto()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg\"\n)\n .resize(scale().width(300))\n .delivery(format(auto()))\n .setDeliveryType(\"fetch\");","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\/fetch\/w_300,f_auto\/https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"fetch","resource_type":"image","transformation":[{"width":"300","format":"auto"}],"transformation_string":"w_300,f_auto","url_suffix":"","version":"","secure":true,"public_id":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/68\/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg","extension":"jpg","format":"auto","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
自动格式特征提供引擎盖下直播功能,随着浏览器支持演化和修改,云式客户随着服务更新而持续增加值
谈到选择最佳格式时,云性不盲目选择格式仅由浏览器,甚至不由接受信头选择云形监控浏览器生态圈 多亏广大用户群 检测浏览器支持问题并立即响应浏览器支持不同格式偶而破解,即使特定浏览器广告支持特定格式有时这些故障偏向性化,例如运行系统特定版本中断Safari支持或有时故障指具有特定属性图像,如透明性或可能更多隐性案例
使用f_aut表示网站媒体对浏览器错误和浏览器更新反应,基于图像分析
云性动态格式选择特征与云性自动质量选择特征并用可进一步加强内含质量问题参数并置值汽车高山市q_autCloudinary自动判定图像基于格式和内容的最佳质量设置,结果最小文件大小同时保持视觉质量时添加f_aut并发q_aut交付 URL中,云性算法还检验不同图像格式在维护视觉质量的同时显示小文件大小
举例说峡谷图像缩放至宽度400像素并同时交付自动质量选择和自动格式选择q_aut并f_aut)交付14KB省油62%)WebP20.2KB省45%)或JPEG-200024.3KB34%存到支持浏览器和JPEG36.6KB面向所有其他浏览器
<\/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(\"canyons.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"canyons.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","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(\"canyons.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"canyons.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(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(\"canyons.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"canyons.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('canyons.jpg', {width: 400, quality: \"auto\", fetchFormat: \"auto\", crop: \"scale\"}).toHtml();","codeSnippet":"cloudinary.imageTag('canyons.jpg', {width: 400, quality: \"auto\", fetchFormat: \"auto\", crop: \"scale\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"canyons.jpg\").image(width=400, quality=\"auto\", fetch_format=\"auto\", crop=\"scale\")","codeSnippet":"CloudinaryImage(\"canyons.jpg\").image(width=400, quality=\"auto\", fetch_format=\"auto\", crop=\"scale\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('canyons.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","codeSnippet":"(new ImageTag('canyons.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"canyons.jpg\", array(\"width\"=>400, \"quality\"=>\"auto\", \"fetch_format\"=>\"auto\", \"crop\"=>\"scale\"))","codeSnippet":"cl_image_tag(\"canyons.jpg\", array(\"width\"=>400, \"quality\"=>\"auto\", \"fetch_format\"=>\"auto\", \"crop\"=>\"scale\"))","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(400).quality(\"auto\").fetchFormat(\"auto\").crop(\"scale\")).imageTag(\"canyons.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(400).quality(\"auto\").fetchFormat(\"auto\").crop(\"scale\")).imageTag(\"canyons.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"canyons.jpg\", :width=>400, :quality=>\"auto\", :fetch_format=>:auto, :crop=>\"scale\")","codeSnippet":"cl_image_tag(\"canyons.jpg\", :width=>400, :quality=>\"auto\", :fetch_format=>:auto, :crop=>\"scale\")","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(400).Quality(\"auto\").FetchFormat(\"auto\").Crop(\"scale\")).BuildImageTag(\"canyons.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Quality(\"auto\").FetchFormat(\"auto\").Crop(\"scale\")).BuildImageTag(\"canyons.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('canyons.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('canyons.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.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(400).setQuality(\"auto\").setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"canyons.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setQuality(\"auto\").setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"canyons.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(400).quality(\"auto\").fetchFormat(\"auto\").crop(\"scale\")).generate(\"canyons.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(400).quality(\"auto\").fetchFormat(\"auto\").crop(\"scale\")).generate(\"canyons.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('canyons.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('canyons.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.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(\"canyons.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"canyons.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.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(\"canyons.jpg\", {width: 400, quality: \"auto\", fetch_format: \"auto\", crop: \"scale\"})","codeSnippet":"$.cloudinary.image(\"canyons.jpg\", {width: 400, quality: \"auto\", fetch_format: \"auto\", crop: \"scale\"})","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(\"canyons.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"canyons.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(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_400,f_auto,q_auto\/canyons.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"400","format":"auto","quality":"auto"}],"transformation_string":"w_400,f_auto,q_auto","url_suffix":"","version":"","secure":true,"public_id":"canyons.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
况且使用时f_aut并q_aut并发访问浏览器在决定最佳图像格式时不仅会考虑浏览器,而且会考虑图像内容举个例子,云化算法可能判定PNG格式更适合包含图画等内容的具体图像对某些图像来说,连PNG8格式都可自动选择,以提供高效文件大小高超的外观结果
下URL动态生成400像素宽版绘图使用自动图像质量选择q_aut无f_aut)
<\/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(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(quality(auto()));","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(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(quality(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(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(quality(auto()));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('cloud_castle.jpg', {width: 400, quality: \"auto\", crop: \"scale\"}).toHtml();","codeSnippet":"cloudinary.imageTag('cloud_castle.jpg', {width: 400, quality: \"auto\", crop: \"scale\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"cloud_castle.jpg\").image(width=400, quality=\"auto\", crop=\"scale\")","codeSnippet":"CloudinaryImage(\"cloud_castle.jpg\").image(width=400, quality=\"auto\", crop=\"scale\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('cloud_castle.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","codeSnippet":"(new ImageTag('cloud_castle.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"cloud_castle.jpg\", array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"))","codeSnippet":"cl_image_tag(\"cloud_castle.jpg\", array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"))","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(400).quality(\"auto\").crop(\"scale\")).imageTag(\"cloud_castle.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(400).quality(\"auto\").crop(\"scale\")).imageTag(\"cloud_castle.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"cloud_castle.jpg\", :width=>400, :quality=>\"auto\", :crop=>\"scale\")","codeSnippet":"cl_image_tag(\"cloud_castle.jpg\", :width=>400, :quality=>\"auto\", :crop=>\"scale\")","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(400).Quality(\"auto\").Crop(\"scale\")).BuildImageTag(\"cloud_castle.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Quality(\"auto\").Crop(\"scale\")).BuildImageTag(\"cloud_castle.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('cloud_castle.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('cloud_castle.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.quality(\n\tQuality.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(400).setQuality(\"auto\").setCrop(\"scale\")).generate(\"cloud_castle.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setQuality(\"auto\").setCrop(\"scale\")).generate(\"cloud_castle.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(400).quality(\"auto\").crop(\"scale\")).generate(\"cloud_castle.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(400).quality(\"auto\").crop(\"scale\")).generate(\"cloud_castle.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('cloud_castle.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('cloud_castle.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.quality(\n\tQuality.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(\"cloud_castle.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.quality(\n\tQuality.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"cloud_castle.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.quality(\n\tQuality.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(\"cloud_castle.jpg\", {width: 400, quality: \"auto\", crop: \"scale\"})","codeSnippet":"$.cloudinary.image(\"cloud_castle.jpg\", {width: 400, quality: \"auto\", crop: \"scale\"})","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(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(quality(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_400,q_auto\/cloud_castle.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"400","quality":"auto"}],"transformation_string":"w_400,q_auto","url_suffix":"","version":"","secure":true,"public_id":"cloud_castle.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
JPEG图像20.4KB显示JPEG格式损耗性产生视觉人工品下例同绘,将两者并举q_aut并f_aut:
<\/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(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","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(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(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(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('cloud_castle.jpg', {width: 400, quality: \"auto\", fetchFormat: \"auto\", crop: \"scale\"}).toHtml();","codeSnippet":"cloudinary.imageTag('cloud_castle.jpg', {width: 400, quality: \"auto\", fetchFormat: \"auto\", crop: \"scale\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"cloud_castle.jpg\").image(width=400, quality=\"auto\", fetch_format=\"auto\", crop=\"scale\")","codeSnippet":"CloudinaryImage(\"cloud_castle.jpg\").image(width=400, quality=\"auto\", fetch_format=\"auto\", crop=\"scale\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('cloud_castle.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","codeSnippet":"(new ImageTag('cloud_castle.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"cloud_castle.jpg\", array(\"width\"=>400, \"quality\"=>\"auto\", \"fetch_format\"=>\"auto\", \"crop\"=>\"scale\"))","codeSnippet":"cl_image_tag(\"cloud_castle.jpg\", array(\"width\"=>400, \"quality\"=>\"auto\", \"fetch_format\"=>\"auto\", \"crop\"=>\"scale\"))","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(400).quality(\"auto\").fetchFormat(\"auto\").crop(\"scale\")).imageTag(\"cloud_castle.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(400).quality(\"auto\").fetchFormat(\"auto\").crop(\"scale\")).imageTag(\"cloud_castle.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"cloud_castle.jpg\", :width=>400, :quality=>\"auto\", :fetch_format=>:auto, :crop=>\"scale\")","codeSnippet":"cl_image_tag(\"cloud_castle.jpg\", :width=>400, :quality=>\"auto\", :fetch_format=>:auto, :crop=>\"scale\")","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(400).Quality(\"auto\").FetchFormat(\"auto\").Crop(\"scale\")).BuildImageTag(\"cloud_castle.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Quality(\"auto\").FetchFormat(\"auto\").Crop(\"scale\")).BuildImageTag(\"cloud_castle.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('cloud_castle.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('cloud_castle.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.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(400).setQuality(\"auto\").setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"cloud_castle.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setQuality(\"auto\").setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"cloud_castle.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(400).quality(\"auto\").fetchFormat(\"auto\").crop(\"scale\")).generate(\"cloud_castle.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(400).quality(\"auto\").fetchFormat(\"auto\").crop(\"scale\")).generate(\"cloud_castle.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('cloud_castle.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('cloud_castle.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.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(\"cloud_castle.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"cloud_castle.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.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(\"cloud_castle.jpg\", {width: 400, quality: \"auto\", fetch_format: \"auto\", crop: \"scale\"})","codeSnippet":"$.cloudinary.image(\"cloud_castle.jpg\", {width: 400, quality: \"auto\", fetch_format: \"auto\", crop: \"scale\"})","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(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"cloud_castle.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(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_400,q_auto,f_auto\/cloud_castle.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"400","quality":"auto","format":"auto"}],"transformation_string":"w_400,q_auto,f_auto","url_suffix":"","version":"","secure":true,"public_id":"cloud_castle.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
算法决定用PNG8格式编码图像图像看起来更好,没有文物,比重更少 — — 仅16.5KB
以最优格式提供图像很容易自动化并使用云性格式选择算法特征还可以与自动质量选择组合使用最微带宽和最大视觉质量提供所有图像的强动态解决方案更多细节见自动格式选择文档.
所有图像变换和交付特征在这里讨论 提供无附加收费 所有云式计划,包括自由计划.
