图像优化是减少页负载时间、提高用户体验和降低带宽成本的重要一步JPEG使用时图像格式最常用优化控制JPEG质量
JPEG质量下降表示90%、80%或50%后,JPEG文件会小得多图像质量够高吗JPEG优化难办,因为如果质量太低, 你会得到模糊图像,像素化和可见压缩人工品如果太高图像看起来不错,但加载时间过长
我们认为让用户使用将大有裨益自动JPEG优化而不牺牲质量于是我们结为伙伴JPEGMini网络服务完全实现 — — 智能平衡文件缩放需求与提供高质量视觉结果需求JPEGmini优化文件大小可达5x,同时保持原创质量
JPEGmini与云图像管理解决方案集成化, 允许用户使用JPEGs搭建智能优化继续读看它是如何实现的
云化基于云端媒体管理解决方案自动化精简媒体资产从上传到转换再通过多CDN交付的整个工作流
图像变换之一是改变JPEG质量取狗JPG图像上传云端并分配ID'appy_dog'
原创图像高清晰度照片 2082x2975被保存为高质量JPG和称重2.5MB多数据传递到网络或移动查看器
云情允许你设置jPG质量级质量问题参数(或)q二维if在图像 URL内指定)值介于1至100此外,对生成图像应用更多无损优化下方代码或动态变换URL将原图像即时转换为JPEG90%质量(为插图目的,下方图像重新缩放为250x358缩略图)。生成图像只权重681KB公元前高质尺寸的19%
<\/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(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(90));","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(90));","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(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(90));","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(90));","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(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(90));","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(90));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('happy_dog.jpg', {width: 250, quality: 90, crop: \"scale\"}).toHtml();","codeSnippet":"cloudinary.imageTag('happy_dog.jpg', {width: 250, quality: 90, 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(\"happy_dog.jpg\").image(width=250, quality=90, crop=\"scale\")","codeSnippet":"CloudinaryImage(\"happy_dog.jpg\").image(width=250, quality=90, 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('happy_dog.jpg'))\n\t->resize(Resize::scale()->width(250))\n\t->delivery(Delivery::quality(90));","codeSnippet":"(new ImageTag('happy_dog.jpg'))\n\t->resize(Resize::scale()->width(250))\n\t->delivery(Delivery::quality(90));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"happy_dog.jpg\", array(\"width\"=>250, \"quality\"=>90, \"crop\"=>\"scale\"))","codeSnippet":"cl_image_tag(\"happy_dog.jpg\", array(\"width\"=>250, \"quality\"=>90, \"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(250).quality(90).crop(\"scale\")).imageTag(\"happy_dog.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(250).quality(90).crop(\"scale\")).imageTag(\"happy_dog.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"happy_dog.jpg\", :width=>250, :quality=>90, :crop=>\"scale\")","codeSnippet":"cl_image_tag(\"happy_dog.jpg\", :width=>250, :quality=>90, :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(250).Quality(90).Crop(\"scale\")).BuildImageTag(\"happy_dog.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Quality(90).Crop(\"scale\")).BuildImageTag(\"happy_dog.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(250))\n\t.delivery(Delivery.quality(90)));","codeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(250))\n\t.delivery(Delivery.quality(90)));","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(250).setQuality(90).setCrop(\"scale\")).generate(\"happy_dog.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setQuality(90).setCrop(\"scale\")).generate(\"happy_dog.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(250).quality(90).crop(\"scale\")).generate(\"happy_dog.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(250).quality(90).crop(\"scale\")).generate(\"happy_dog.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(250))\n\t.delivery(Delivery.quality(90)));","codeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(250))\n\t.delivery(Delivery.quality(90)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"happy_dog.jpg\")\n\t resize(Resize.scale() { width(250) })\n\t delivery(Delivery.quality(90)) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"happy_dog.jpg\")\n\t resize(Resize.scale() { width(250) })\n\t delivery(Delivery.quality(90)) \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(\"happy_dog.jpg\", {width: 250, quality: 90, crop: \"scale\"})","codeSnippet":"$.cloudinary.image(\"happy_dog.jpg\", {width: 250, quality: 90, 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(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(90));","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(90));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/w_250,q_90\/happy_dog.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"250","quality":"90"}],"transformation_string":"w_250,q_90","url_suffix":"","version":"","secure":true,"public_id":"happy_dog.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
上方例子中,我们使用90%质量,相当高并保证良好的视觉结果或可设定低JPEG质量水平,而从原创目到裸眼则不可分辨Cloudinary新JPEGmini加法应用JPEG优化
JPEGMini优化简单设置质量问题参数生成图像URL代码jpegmini语.下转换URL和代码优化图像上传使用JPEGMini并同时通过CDN交付结果生成相片只权重425KB.表示我们几乎存40%文件大小比90质量JPG或以上80%对比原创图片遍历网站可显著改善用户体验并尽量减少带宽成本
<\/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(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(jpegmini()))\n .setSignature(\"zBdJ64Vk\");","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(jpegmini()))\n .setSignature(\"zBdJ64Vk\");","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(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(jpegmini()))\n .setSignature(\"zBdJ64Vk\");","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(jpegmini()))\n .setSignature(\"zBdJ64Vk\");","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(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(jpegmini()))\n .setSignature(\"zBdJ64Vk\");","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(jpegmini()))\n .setSignature(\"zBdJ64Vk\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('happy_dog.jpg', {quality: \"jpegmini\", width: 250, crop: \"scale\", signUrl: true}).toHtml();","codeSnippet":"cloudinary.imageTag('happy_dog.jpg', {quality: \"jpegmini\", width: 250, crop: \"scale\", signUrl: true}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"happy_dog.jpg\").image(quality=\"jpegmini\", width=250, crop=\"scale\", sign_url=True)","codeSnippet":"CloudinaryImage(\"happy_dog.jpg\").image(quality=\"jpegmini\", width=250, crop=\"scale\", sign_url=True)","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('happy_dog.jpg'))\n\t->resize(Resize::scale()->width(250))\n\t->delivery(Delivery::quality(\n\tQuality::jpegmini()))\n\t->sign();","codeSnippet":"(new ImageTag('happy_dog.jpg'))\n\t->resize(Resize::scale()->width(250))\n\t->delivery(Delivery::quality(\n\tQuality::jpegmini()))\n\t->sign();","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"happy_dog.jpg\", array(\"quality\"=>\"jpegmini\", \"width\"=>250, \"crop\"=>\"scale\", \"sign_url\"=>true))","codeSnippet":"cl_image_tag(\"happy_dog.jpg\", array(\"quality\"=>\"jpegmini\", \"width\"=>250, \"crop\"=>\"scale\", \"sign_url\"=>true))","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().quality(\"jpegmini\").width(250).crop(\"scale\")).signed(true).imageTag(\"happy_dog.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"jpegmini\").width(250).crop(\"scale\")).signed(true).imageTag(\"happy_dog.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"happy_dog.jpg\", :quality=>\"jpegmini\", :width=>250, :crop=>\"scale\", :sign_url=>true)","codeSnippet":"cl_image_tag(\"happy_dog.jpg\", :quality=>\"jpegmini\", :width=>250, :crop=>\"scale\", :sign_url=>true)","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().Quality(\"jpegmini\").Width(250).Crop(\"scale\")).Signed(true).BuildImageTag(\"happy_dog.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"jpegmini\").Width(250).Crop(\"scale\")).Signed(true).BuildImageTag(\"happy_dog.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(250))\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"zBdJ64Vk\"));","codeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(250))\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"zBdJ64Vk\"));","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().setQuality(\"jpegmini\").setWidth(250).setCrop(\"scale\")).generate(\"happy_dog.jpg\", signUrl: true)!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\"jpegmini\").setWidth(250).setCrop(\"scale\")).generate(\"happy_dog.jpg\", signUrl: true)!, 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().quality(\"jpegmini\").width(250).crop(\"scale\")).signed(true).generate(\"happy_dog.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(\"jpegmini\").width(250).crop(\"scale\")).signed(true).generate(\"happy_dog.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(250))\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"zBdJ64Vk\"));","codeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.scale().width(250))\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"zBdJ64Vk\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"happy_dog.jpg\")\n\t resize(Resize.scale() { width(250) })\n\t delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t signature() \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"happy_dog.jpg\")\n\t resize(Resize.scale() { width(250) })\n\t delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t signature() \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(\"happy_dog.jpg\", {quality: \"jpegmini\", width: 250, crop: \"scale\"})","codeSnippet":"$.cloudinary.image(\"happy_dog.jpg\", {quality: \"jpegmini\", width: 250, 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(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(jpegmini()))\n .setSignature(\"zBdJ64Vk\");","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(scale().width(250))\n .delivery(quality(jpegmini()))\n .setSignature(\"zBdJ64Vk\");","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/s--zBdJ64Vk--\/c_scale,q_jpegmini,w_250\/happy_dog.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"crop_mode":"scale","quality":"jpegmini","width":"250"}],"transformation_string":"c_scale,q_jpegmini,w_250","url_suffix":"","version":"","secure":true,"public_id":"happy_dog.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"zBdJ64Vk","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
如你所见 生成照片与原创相仿相似 超重
以上缩略图由云形生成宽度并高度显示参数-这是自动为网站或移动应用创建大图像缩图的简单方式
注意250x358缩略图优化JPEGMinis15.9KB表示几乎存取50%文件大小比90质量版相同缩略图称称30.2KB,结果似乎与人眼完全相同
减少文件大小并从而改善用户体验并降低带宽成本是一项重要目标并行地,你还想确保所有照片视觉清晰并显示可接受(或更高)质量JPEGmini优化JPEG质量和图像大小,但直到JPEG对人眼仍然看好的点测试分析每一图像并发现质量阈值 以保持该特定图像好看, 并应用质量水平图像
下图上传到云内并写有 luue_sky标识310x207称重87.1KB.
<\/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(\"blue_sky.jpg\");","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\");","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(\"blue_sky.jpg\");","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\");","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(\"blue_sky.jpg\");","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('blue_sky.jpg').toHtml();","codeSnippet":"cloudinary.imageTag('blue_sky.jpg').toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"blue_sky.jpg\").image()","codeSnippet":"CloudinaryImage(\"blue_sky.jpg\").image()","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('blue_sky.jpg'));","codeSnippet":"(new ImageTag('blue_sky.jpg'));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"blue_sky.jpg\")","codeSnippet":"cl_image_tag(\"blue_sky.jpg\")","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(\"blue_sky.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().imageTag(\"blue_sky.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"blue_sky.jpg\")","codeSnippet":"cl_image_tag(\"blue_sky.jpg\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.BuildImageTag(\"blue_sky.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.BuildImageTag(\"blue_sky.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation());","codeSnippet":"cloudinary.image('blue_sky.jpg').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(\"blue_sky.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().generate(\"blue_sky.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().generate(\"blue_sky.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().generate(\"blue_sky.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation());","codeSnippet":"cloudinary.image('blue_sky.jpg').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(\"blue_sky.jpg\") \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"blue_sky.jpg\") \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(\"blue_sky.jpg\")","codeSnippet":"$.cloudinary.image(\"blue_sky.jpg\")","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(\"blue_sky.jpg\");","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\");","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/blue_sky.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[],"transformation_string":"","url_suffix":"","version":"","secure":true,"public_id":"blue_sky.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
尝试将图像转换为质量80JPEG5KB中保存80%原文件大小然而结果看似不够好天空梯度有一些噪声 白线和文本也是
<\/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(\"blue_sky.jpg\").delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\").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(\"blue_sky.jpg\").delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\").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(\"blue_sky.jpg\").delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\").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('blue_sky.jpg', {quality: 80}).toHtml();","codeSnippet":"cloudinary.imageTag('blue_sky.jpg', {quality: 80}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"blue_sky.jpg\").image(quality=80)","codeSnippet":"CloudinaryImage(\"blue_sky.jpg\").image(quality=80)","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('blue_sky.jpg'))\n\t->delivery(Delivery::quality(80));","codeSnippet":"(new ImageTag('blue_sky.jpg'))\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(\"blue_sky.jpg\", array(\"quality\"=>80))","codeSnippet":"cl_image_tag(\"blue_sky.jpg\", array(\"quality\"=>80))","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().quality(80)).imageTag(\"blue_sky.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(80)).imageTag(\"blue_sky.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"blue_sky.jpg\", :quality=>80)","codeSnippet":"cl_image_tag(\"blue_sky.jpg\", :quality=>80)","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().Quality(80)).BuildImageTag(\"blue_sky.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(80)).BuildImageTag(\"blue_sky.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(80)));","codeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation()\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().setQuality(80)).generate(\"blue_sky.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(80)).generate(\"blue_sky.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().quality(80)).generate(\"blue_sky.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(80)).generate(\"blue_sky.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(80)));","codeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation()\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(\"blue_sky.jpg\")\n\t delivery(Delivery.quality(80)) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"blue_sky.jpg\")\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(\"blue_sky.jpg\", {quality: 80})","codeSnippet":"$.cloudinary.image(\"blue_sky.jpg\", {quality: 80})","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(\"blue_sky.jpg\").delivery(quality(80));","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\").delivery(quality(80));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/q_80\/blue_sky.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"quality":"80"}],"transformation_string":"q_80","url_suffix":"","version":"","secure":true,"public_id":"blue_sky.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
设置质量问题参数切换jpegmini语生成更美图像少点噪声, 安全嵌入网站图像权重28KB大于80%质量版,但仍保存近70%原图像大小
<\/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(\"blue_sky.jpg\")\n .delivery(quality(jpegmini()))\n .setSignature(\"HneLfqnx\");","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\")\n .delivery(quality(jpegmini()))\n .setSignature(\"HneLfqnx\");","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(\"blue_sky.jpg\")\n .delivery(quality(jpegmini()))\n .setSignature(\"HneLfqnx\");","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\")\n .delivery(quality(jpegmini()))\n .setSignature(\"HneLfqnx\");","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(\"blue_sky.jpg\")\n .delivery(quality(jpegmini()))\n .setSignature(\"HneLfqnx\");","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\")\n .delivery(quality(jpegmini()))\n .setSignature(\"HneLfqnx\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('blue_sky.jpg', {quality: \"jpegmini\", signUrl: true}).toHtml();","codeSnippet":"cloudinary.imageTag('blue_sky.jpg', {quality: \"jpegmini\", signUrl: true}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"blue_sky.jpg\").image(quality=\"jpegmini\", sign_url=True)","codeSnippet":"CloudinaryImage(\"blue_sky.jpg\").image(quality=\"jpegmini\", sign_url=True)","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('blue_sky.jpg'))\n\t->delivery(Delivery::quality(\n\tQuality::jpegmini()))\n\t->sign();","codeSnippet":"(new ImageTag('blue_sky.jpg'))\n\t->delivery(Delivery::quality(\n\tQuality::jpegmini()))\n\t->sign();","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"blue_sky.jpg\", array(\"quality\"=>\"jpegmini\", \"sign_url\"=>true))","codeSnippet":"cl_image_tag(\"blue_sky.jpg\", array(\"quality\"=>\"jpegmini\", \"sign_url\"=>true))","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().quality(\"jpegmini\")).signed(true).imageTag(\"blue_sky.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"jpegmini\")).signed(true).imageTag(\"blue_sky.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"blue_sky.jpg\", :quality=>\"jpegmini\", :sign_url=>true)","codeSnippet":"cl_image_tag(\"blue_sky.jpg\", :quality=>\"jpegmini\", :sign_url=>true)","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().Quality(\"jpegmini\")).Signed(true).BuildImageTag(\"blue_sky.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"jpegmini\")).Signed(true).BuildImageTag(\"blue_sky.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"HneLfqnx\"));","codeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"HneLfqnx\"));","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().setQuality(\"jpegmini\")).generate(\"blue_sky.jpg\", signUrl: true)!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\"jpegmini\")).generate(\"blue_sky.jpg\", signUrl: true)!, 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().quality(\"jpegmini\")).signed(true).generate(\"blue_sky.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(\"jpegmini\")).signed(true).generate(\"blue_sky.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"HneLfqnx\"));","codeSnippet":"cloudinary.image('blue_sky.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"HneLfqnx\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"blue_sky.jpg\")\n\t delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t signature() \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"blue_sky.jpg\")\n\t delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t signature() \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(\"blue_sky.jpg\", {quality: \"jpegmini\"})","codeSnippet":"$.cloudinary.image(\"blue_sky.jpg\", {quality: \"jpegmini\"})","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(\"blue_sky.jpg\")\n .delivery(quality(jpegmini()))\n .setSignature(\"HneLfqnx\");","codeSnippet":"new CloudinaryImage(\"blue_sky.jpg\")\n .delivery(quality(jpegmini()))\n .setSignature(\"HneLfqnx\");","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/s--HneLfqnx--\/q_jpegmini\/blue_sky.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"quality":"jpegmini"}],"transformation_string":"q_jpegmini","url_suffix":"","version":"","secure":true,"public_id":"blue_sky.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"HneLfqnx","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
云化图象应用各种变换上方展示出几样多图像变换支持者。JPEGmini优化可与云形支持的任何其他图像变换合并与JPEGMini并发
下动态变换URL样本代码裁剪狗照片二百二百二百二百三百三
<\/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(\"happy_dog.jpg\")\n .resize(\n fill()\n .width(200)\n .height(230)\n .gravity(compass(\"north\"))\n )\n .roundCorners(max())\n .adjust(improve())\n .effect(shadow())\n .delivery(quality(jpegmini()))\n .setSignature(\"dR18Vfyz\");","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(\n fill()\n .width(200)\n .height(230)\n .gravity(compass(\"north\"))\n )\n .roundCorners(max())\n .adjust(improve())\n .effect(shadow())\n .delivery(quality(jpegmini()))\n .setSignature(\"dR18Vfyz\");","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(\"happy_dog.jpg\")\n .resize(\n fill()\n .width(200)\n .height(230)\n .gravity(compass(\"north\"))\n )\n .roundCorners(max())\n .adjust(improve())\n .effect(shadow())\n .delivery(quality(jpegmini()))\n .setSignature(\"dR18Vfyz\");","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(\n fill()\n .width(200)\n .height(230)\n .gravity(compass(\"north\"))\n )\n .roundCorners(max())\n .adjust(improve())\n .effect(shadow())\n .delivery(quality(jpegmini()))\n .setSignature(\"dR18Vfyz\");","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(\"happy_dog.jpg\")\n .resize(\n fill()\n .width(200)\n .height(230)\n .gravity(compass(\"north\"))\n )\n .roundCorners(max())\n .adjust(improve())\n .effect(shadow())\n .delivery(quality(jpegmini()))\n .setSignature(\"dR18Vfyz\");","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(\n fill()\n .width(200)\n .height(230)\n .gravity(compass(\"north\"))\n )\n .roundCorners(max())\n .adjust(improve())\n .effect(shadow())\n .delivery(quality(jpegmini()))\n .setSignature(\"dR18Vfyz\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('happy_dog.jpg', {signUrl: true, transformation: [ {effect: \"improve\", gravity: \"north\", height: 230, radius: \"max\", width: 200, crop: \"fill\"}, {effect: \"shadow\", quality: \"jpegmini\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('happy_dog.jpg', {signUrl: true, transformation: [\n {effect: \"improve\", gravity: \"north\", height: 230, radius: \"max\", width: 200, crop: \"fill\"},\n {effect: \"shadow\", quality: \"jpegmini\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"happy_dog.jpg\").image(sign_url=True, transformation=[ {'effect': \"improve\", 'gravity': \"north\", 'height': 230, 'radius': \"max\", 'width': 200, 'crop': \"fill\"}, {'effect': \"shadow\", 'quality': \"jpegmini\"} ])","codeSnippet":"CloudinaryImage(\"happy_dog.jpg\").image(sign_url=True, transformation=[\n {'effect': \"improve\", 'gravity': \"north\", 'height': 230, 'radius': \"max\", 'width': 200, 'crop': \"fill\"},\n {'effect': \"shadow\", 'quality': \"jpegmini\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('happy_dog.jpg'))\n\t->resize(Resize::fill()->width(200)\n->height(230)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->roundCorners(RoundCorners::max())\n\t->adjust(Adjust::improve())\n\t->effect(Effect::shadow())\n\t->delivery(Delivery::quality(\n\tQuality::jpegmini()))\n\t->sign();","codeSnippet":"(new ImageTag('happy_dog.jpg'))\n\t->resize(Resize::fill()->width(200)\n->height(230)\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t->roundCorners(RoundCorners::max())\n\t->adjust(Adjust::improve())\n\t->effect(Effect::shadow())\n\t->delivery(Delivery::quality(\n\tQuality::jpegmini()))\n\t->sign();","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"happy_dog.jpg\", array(\"sign_url\"=>true, \"transformation\"=>array( array(\"effect\"=>\"improve\", \"gravity\"=>\"north\", \"height\"=>230, \"radius\"=>\"max\", \"width\"=>200, \"crop\"=>\"fill\"), array(\"effect\"=>\"shadow\", \"quality\"=>\"jpegmini\") )))","codeSnippet":"cl_image_tag(\"happy_dog.jpg\", array(\"sign_url\"=>true, \"transformation\"=>array(\n array(\"effect\"=>\"improve\", \"gravity\"=>\"north\", \"height\"=>230, \"radius\"=>\"max\", \"width\"=>200, \"crop\"=>\"fill\"),\n array(\"effect\"=>\"shadow\", \"quality\"=>\"jpegmini\")\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().effect(\"improve\").gravity(\"north\").height(230).radius(\"max\").width(200).crop(\"fill\").chain() .effect(\"shadow\").quality(\"jpegmini\")).signed(true).imageTag(\"happy_dog.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .effect(\"improve\").gravity(\"north\").height(230).radius(\"max\").width(200).crop(\"fill\").chain()\n .effect(\"shadow\").quality(\"jpegmini\")).signed(true).imageTag(\"happy_dog.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"happy_dog.jpg\", :sign_url=>true, :transformation=>[ {:effect=>\"improve\", :gravity=>\"north\", :height=>230, :radius=>\"max\", :width=>200, :crop=>\"fill\"}, {:effect=>\"shadow\", :quality=>\"jpegmini\"} ])","codeSnippet":"cl_image_tag(\"happy_dog.jpg\", :sign_url=>true, :transformation=>[\n {:effect=>\"improve\", :gravity=>\"north\", :height=>230, :radius=>\"max\", :width=>200, :crop=>\"fill\"},\n {:effect=>\"shadow\", :quality=>\"jpegmini\"}\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().Effect(\"improve\").Gravity(\"north\").Height(230).Radius(\"max\").Width(200).Crop(\"fill\").Chain() .Effect(\"shadow\").Quality(\"jpegmini\")).Signed(true).BuildImageTag(\"happy_dog.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Effect(\"improve\").Gravity(\"north\").Height(230).Radius(\"max\").Width(200).Crop(\"fill\").Chain()\n .Effect(\"shadow\").Quality(\"jpegmini\")).Signed(true).BuildImageTag(\"happy_dog.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(200)\n.height(230)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t)\n\t.roundCorners(RoundCorners.max())\n\t.adjust(Adjust.improve())\n\t.effect(Effect.shadow())\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"dR18Vfyz\"));","codeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(200)\n.height(230)\n\t.gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t)\n\t.roundCorners(RoundCorners.max())\n\t.adjust(Adjust.improve())\n\t.effect(Effect.shadow())\n\t.delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t.setSignature(\"dR18Vfyz\"));","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().setEffect(\"improve\").setGravity(\"north\").setHeight(230).setRadius(\"max\").setWidth(200).setCrop(\"fill\").chain() .setEffect(\"shadow\").setQuality(\"jpegmini\")).generate(\"happy_dog.jpg\", signUrl: true)!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setEffect(\"improve\").setGravity(\"north\").setHeight(230).setRadius(\"max\").setWidth(200).setCrop(\"fill\").chain()\n .setEffect(\"shadow\").setQuality(\"jpegmini\")).generate(\"happy_dog.jpg\", signUrl: true)!, 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().effect(\"improve\").gravity(\"north\").height(230).radius(\"max\").width(200).crop(\"fill\").chain() .effect(\"shadow\").quality(\"jpegmini\")).signed(true).generate(\"happy_dog.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .effect(\"improve\").gravity(\"north\").height(230).radius(\"max\").width(200).crop(\"fill\").chain()\n .effect(\"shadow\").quality(\"jpegmini\")).signed(true).generate(\"happy_dog.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.addTransformation(\"c_fill,e_improve,g_north,h_230,r_max,w_200\/e_shadow,q_jpegmini\")\n\t.setSignature(\"dR18Vfyz\"));","codeSnippet":"cloudinary.image('happy_dog.jpg').transformation(Transformation()\n\t.addTransformation(\"c_fill,e_improve,g_north,h_230,r_max,w_200\/e_shadow,q_jpegmini\")\n\t.setSignature(\"dR18Vfyz\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"happy_dog.jpg\")\n\t resize(Resize.fill() { width(200)\n height(230)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t roundCorners(RoundCorners.max())\n\t adjust(Adjust.improve())\n\t effect(Effect.shadow())\n\t delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t signature() \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"happy_dog.jpg\")\n\t resize(Resize.fill() { width(200)\n height(230)\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n\t })\n\t roundCorners(RoundCorners.max())\n\t adjust(Adjust.improve())\n\t effect(Effect.shadow())\n\t delivery(Delivery.quality(\n\tQuality.jpegmini()))\n\t signature() \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(\"happy_dog.jpg\", {transformation: [ {effect: \"improve\", gravity: \"north\", height: 230, radius: \"max\", width: 200, crop: \"fill\"}, {effect: \"shadow\", quality: \"jpegmini\"} ]})","codeSnippet":"$.cloudinary.image(\"happy_dog.jpg\", {transformation: [\n {effect: \"improve\", gravity: \"north\", height: 230, radius: \"max\", width: 200, crop: \"fill\"},\n {effect: \"shadow\", quality: \"jpegmini\"}\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(\"happy_dog.jpg\")\n .resize(\n fill()\n .width(200)\n .height(230)\n .gravity(compass(\"north\"))\n )\n .roundCorners(max())\n .adjust(improve())\n .effect(shadow())\n .delivery(quality(jpegmini()))\n .setSignature(\"dR18Vfyz\");","codeSnippet":"new CloudinaryImage(\"happy_dog.jpg\")\n .resize(\n fill()\n .width(200)\n .height(230)\n .gravity(compass(\"north\"))\n )\n .roundCorners(max())\n .adjust(improve())\n .effect(shadow())\n .delivery(quality(jpegmini()))\n .setSignature(\"dR18Vfyz\");","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/s--dR18Vfyz--\/c_fill,e_improve,g_north,h_230,r_max,w_200\/e_shadow,q_jpegmini\/happy_dog.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"crop_mode":"fill","effect":"improve","gravity":"north","height":"230","radius":"max","width":"200"},{"effect":"shadow","quality":"jpegmini"}],"transformation_string":"c_fill,e_improve,g_north,h_230,r_max,w_200\/e_shadow,q_jpegmini","url_suffix":"","version":"","secure":true,"public_id":"happy_dog.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"dR18Vfyz","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
JPEGmini是一个计算密集操作,你可能想预防未经授权使用它结果,你可能注意到博客文章中所有变换URL都签名(例如,上图中,URL包括秘密J23CUGRX-)通过签名 URLs应用层安全 确保JPEGMiniJPEG优化不能由任何人直接输入URL
防止外部用户执行JPEGmini优化的另一个方法就是在上传图像时“谨慎地”生成优化JPEGs更多细节这些选项和JPEGMini通则参参参参参参参参参参参参参参参参参参参参参参参参参参参参参参参参参参参文档记录.
JPEGmini使用云管理服务应用JPEGmini优化有多简单
可添加自由级JPEGmini附加存到云型账号并用交互式媒体库用照片试探
与往常一样,无论是下文评论还是通过下文评论,你都非常希望得到反馈或评论脸书或微博.
