图像加载并优化云式和Fresco

写由亚基尔佩林 11点15分2017分 4min读取

身为移动开发商,当谈论图像和视频时,我们关注的主要问题之一是为用户创造平滑和惊人的经验,不管用户使用何种设备或网络连接文章中,我要向大家展示你如何轻而易举地提高经验使用云化并Fresco.

Android使用图像(bitmaps)实为困难,因为应用经常耗尽存储器OOM是Android开发者最大的恶梦

莱斯利Knope

有一些知名开源库可以帮助我们处理Picasa、Glide和Fresco等问题

Fresco(脸书版)是我最喜欢的Fresco写C/C++使用shmem堆取代VM堆中间字节缓冲区还存储在原生堆留下更多内存供应用使用并减少OOMs风险并减少垃圾回收量,另一酷点是Fresco支持多图像(多URI),请求不同的图像属性定位,这有助于我们进一步提高用户连通性差等经验

多图像请求

假设你想向用户显示高分辨率相对慢下加载图像与其让他们盯着占位符或加载旋转器一阵子,不如先快速下载小缩略图Fresco设置两张图像URIs,一张低分辨率图像,一张高分辨率图像

        Uri LowResUri高端ResUrisetLowResimage请求Uri(lowResUri).setimage请求Uri(highResUri).setOldCensemSimpleDraweeView.setController(controller);

可如何生成二图像质量URIs

云化取回功能允许远程图像即时转换并优化通过超快CDN交付允许我们轻而易举地生成不同图像质量版本,而不论图像位置

假设这是我原创图像存储在我的AWSS3桶

甜甜圈 https://s3.amazonaws.com/myappmedia/donut.png

可见图像大小近1MB多图像加载有时会损害用户经验,同时等待图像全加载

云化超易取出图像并生成低高频图像版本

获取带云远程图像

基本URL模板使用云性获取远程图像

https://res.www.aaaalireno.com/
         
          /image/fetch/
          
           /

增加动态低分辨率转换

URL添加参数调整质量时长像

https://res.www.aaaalireno.com/demo/image/fetch/f_webp,q_auto:low,w_400/https://s3.amazonaws.com/myappmedia/donut.png

变换图像甜甜圈WebP向下标为400像素宽度,并设置自定义质量:low规模权衡比较低质量被视为可接受性)。变换图像大小从近兆字节减到2.37KB

<\/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(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(autoLow()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(autoLow()))\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(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(autoLow()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(autoLow()))\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(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(autoLow()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(autoLow()))\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:\/\/s3.amazonaws.com\/myappmedia\/donut.png', {quality: \"auto:low\", width: 400, fetchFormat: \"auto\", crop: \"scale\", type: \"fetch\"}).toHtml();","codeSnippet":"cloudinary.imageTag('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png', {quality: \"auto:low\", width: 400, 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:\/\/s3.amazonaws.com\/myappmedia\/donut.png\").image(quality=\"auto:low\", width=400, fetch_format=\"auto\", crop=\"scale\", type=\"fetch\")","codeSnippet":"CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\").image(quality=\"auto:low\", width=400, 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:\/\/s3.amazonaws.com\/myappmedia\/donut.png'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::autoLow()))\n\t->deliveryType(\"fetch\");","codeSnippet":"(new ImageTag('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::autoLow()))\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:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", array(\"quality\"=>\"auto:low\", \"width\"=>400, \"fetch_format\"=>\"auto\", \"crop\"=>\"scale\", \"type\"=>\"fetch\"))","codeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", array(\"quality\"=>\"auto:low\", \"width\"=>400, \"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().quality(\"auto:low\").width(400).fetchFormat(\"auto\").crop(\"scale\")).type(\"fetch\").imageTag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"auto:low\").width(400).fetchFormat(\"auto\").crop(\"scale\")).type(\"fetch\").imageTag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", :quality=>\"auto:low\", :width=>400, :fetch_format=>:auto, :crop=>\"scale\", :type=>\"fetch\")","codeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", :quality=>\"auto:low\", :width=>400, :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().Quality(\"auto:low\").Width(400).FetchFormat(\"auto\").Crop(\"scale\")).Action(\"fetch\").BuildImageTag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"auto:low\").Width(400).FetchFormat(\"auto\").Crop(\"scale\")).Action(\"fetch\").BuildImageTag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.autoLow()))\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.autoLow()))\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().setQuality(\"auto:low\").setWidth(400).setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setType( \"fetch\").setTransformation(CLDTransformation().setQuality(\"auto:low\").setWidth(400).setFetchFormat(\"auto\").setCrop(\"scale\")).generate(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")!, 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(\"auto:low\").width(400).fetchFormat(\"auto\").crop(\"scale\")).type(\"fetch\").generate(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(\"auto:low\").width(400).fetchFormat(\"auto\").crop(\"scale\")).type(\"fetch\").generate(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.autoLow()))\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.autoLow()))\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:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.autoLow()))\n\t deliveryType(\"fetch\") \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.autoLow()))\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:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", {quality: \"auto:low\", width: 400, fetch_format: \"auto\", crop: \"scale\", type: \"fetch\"})","codeSnippet":"$.cloudinary.image(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", {quality: \"auto:low\", width: 400, 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(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(autoLow()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(autoLow()))\n .setDeliveryType(\"fetch\");","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\/fetch\/f_auto,q_auto:low,w_400\/https:\/\/s3.amazonaws.com\/myappmedia\/donut.png","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"fetch","resource_type":"image","transformation":[{"format":"auto","quality":"auto:low","width":"400"}],"transformation_string":"f_auto,q_auto:low,w_400","url_suffix":"","version":"","secure":true,"public_id":"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png","extension":"png","format":"auto","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

注意为WebP工作,你唯一需要做的就是添加webp支持库到您的依存性,像描述来.

添加动态转换高解析

需要注意的是,你还可以动态优化高品质1MB图像,以使它更理想 Android设备屏幕尺寸高分辨率版可修改质量参数为Auto:best并保留宽度与低分辨率相同变换产生6.88KB小尺寸图像

https://res.www.aaaalireno.com/demo/image/fetch/f_webp,q_auto:best,w_400/https://s3.amazonaws.com/myappmedia/donut.png

<\/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(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(webp()))\n .delivery(quality(autoBest()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(webp()))\n .delivery(quality(autoBest()))\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(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(webp()))\n .delivery(quality(autoBest()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(webp()))\n .delivery(quality(autoBest()))\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(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(webp()))\n .delivery(quality(autoBest()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(webp()))\n .delivery(quality(autoBest()))\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:\/\/s3.amazonaws.com\/myappmedia\/donut.png', {quality: \"auto:best\", width: 400, fetchFormat: \"webp\", crop: \"scale\", type: \"fetch\"}).toHtml();","codeSnippet":"cloudinary.imageTag('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png', {quality: \"auto:best\", width: 400, fetchFormat: \"webp\", 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:\/\/s3.amazonaws.com\/myappmedia\/donut.png\").image(quality=\"auto:best\", width=400, fetch_format=\"webp\", crop=\"scale\", type=\"fetch\")","codeSnippet":"CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\").image(quality=\"auto:best\", width=400, fetch_format=\"webp\", 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:\/\/s3.amazonaws.com\/myappmedia\/donut.png'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::webp()))\n\t->delivery(Delivery::quality(\n\tQuality::autoBest()))\n\t->deliveryType(\"fetch\");","codeSnippet":"(new ImageTag('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::webp()))\n\t->delivery(Delivery::quality(\n\tQuality::autoBest()))\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:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", array(\"quality\"=>\"auto:best\", \"width\"=>400, \"fetch_format\"=>\"webp\", \"crop\"=>\"scale\", \"type\"=>\"fetch\"))","codeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", array(\"quality\"=>\"auto:best\", \"width\"=>400, \"fetch_format\"=>\"webp\", \"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().quality(\"auto:best\").width(400).fetchFormat(\"webp\").crop(\"scale\")).type(\"fetch\").imageTag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"auto:best\").width(400).fetchFormat(\"webp\").crop(\"scale\")).type(\"fetch\").imageTag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", :quality=>\"auto:best\", :width=>400, :fetch_format=>\"webp\", :crop=>\"scale\", :type=>\"fetch\")","codeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", :quality=>\"auto:best\", :width=>400, :fetch_format=>\"webp\", :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().Quality(\"auto:best\").Width(400).FetchFormat(\"webp\").Crop(\"scale\")).Action(\"fetch\").BuildImageTag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"auto:best\").Width(400).FetchFormat(\"webp\").Crop(\"scale\")).Action(\"fetch\").BuildImageTag(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.webp()))\n\t.delivery(Delivery.quality(\n\tQuality.autoBest()))\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.webp()))\n\t.delivery(Delivery.quality(\n\tQuality.autoBest()))\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().setQuality(\"auto:best\").setWidth(400).setFetchFormat(\"webp\").setCrop(\"scale\")).generate(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setType( \"fetch\").setTransformation(CLDTransformation().setQuality(\"auto:best\").setWidth(400).setFetchFormat(\"webp\").setCrop(\"scale\")).generate(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")!, 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(\"auto:best\").width(400).fetchFormat(\"webp\").crop(\"scale\")).type(\"fetch\").generate(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(\"auto:best\").width(400).fetchFormat(\"webp\").crop(\"scale\")).type(\"fetch\").generate(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.webp()))\n\t.delivery(Delivery.quality(\n\tQuality.autoBest()))\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/myappmedia\/donut.png').transformation(Transformation()\n\t.resize(Resize.scale().width(400))\n\t.delivery(Delivery.format(\n\tFormat.webp()))\n\t.delivery(Delivery.quality(\n\tQuality.autoBest()))\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:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.webp()))\n\t delivery(Delivery.quality(\n\tQuality.autoBest()))\n\t deliveryType(\"fetch\") \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.webp()))\n\t delivery(Delivery.quality(\n\tQuality.autoBest()))\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:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", {quality: \"auto:best\", width: 400, fetch_format: \"webp\", crop: \"scale\", type: \"fetch\"})","codeSnippet":"$.cloudinary.image(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\", {quality: \"auto:best\", width: 400, fetch_format: \"webp\", 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(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(webp()))\n .delivery(quality(autoBest()))\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\")\n .resize(scale().width(400))\n .delivery(format(webp()))\n .delivery(quality(autoBest()))\n .setDeliveryType(\"fetch\");","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\/fetch\/f_webp,q_auto:best,w_400\/https:\/\/s3.amazonaws.com\/myappmedia\/donut.png","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"fetch","resource_type":"image","transformation":[{"format":"webp","quality":"auto:best","width":"400"}],"transformation_string":"f_webp,q_auto:best,w_400","url_suffix":"","version":"","secure":true,"public_id":"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png","extension":"png","format":"webp","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

使用Fresco完成示例时,只需为低高版本设置URLs

字符串原创imageURL="https://s3.amazonaws.com/myappmedia/donut.png";字符串低ResUri="https://res.www.aaaalireno.com/demo/image/fetch/f_webp,q_auto:low,w_400/e_blur:90/"+原创imageURL字符串高ResUri="https://res.www.aaaalireno.com/demo/image/fetch/f_webp,q_auto:best,w_400/"+原创imageURLDraweeController controller = Fresco.newDraweeControllerBuilder() .setLowResImageRequest(ImageRequest.fromUri(Uri.parse(low_res_url))) .setImageRequest(ImageRequest.fromUri(Uri.parse(high_res_url))) .setOldController(mSimpleDraweeView.getController()).build()!mSimpleDraweeView.setController(controller);代码语言JavaScript高山市javascript)

很容易吧

图像视频是移动应用核心组件使用云形和Fresco可大幅提高 Android用户经验,

自由评论下方您对此文章或其他媒体优化相关问题有任何问题下一站我们将讨论如何优化 Android应用视频

图像加载并优化云式和Fresco

多图像请求

可如何生成二图像质量URIs

获取带云远程图像

增加动态低分辨率转换

添加动态转换高解析

很容易吧

继续阅读图像优化

移动第一世界2技术实现最优移动经验

产品类

解决之道

开发者

公司

联系我们

特征邮箱