跳转到内容

如何自动调整网站图像以适应Retina和HiDPI设备

写由NadavSoferman

web开发仅在几年前简单得多,当时我们正在搭建HTML页面,这些页面包括图片和图片,所有元素共享同解分解单元举例说,你瞄准标准1024x768屏幕,你知道这些是显示HTML元素和图像可用像素数

2010年苹果应用iPhone4视网膜显示.为了简化开发程序,逻辑屏幕解析与前iPhone模型相同(640x960),物理屏幕解析完全翻番(1280x920)。即表示,举例说,如果在HTML页面嵌入图像标签宽度为200像素和高度为300像素,并显示双尺寸像素400x600像素,Retina显示全像素大像素,产生远为清晰视觉结果,不演算浏览器侧向下标

自那以来 苹果设备大都支持设备像素比iPad和MacbookPro笔记本电脑安卓智能手机和平板机跟踪这一趋势,但安卓设备大不相同设备像素比.以三星银河三号为例2.0三星银河S4和LGGG23点0三维物理分辨率安卓设备非圆DPR值还有:1.3、1.5甚至0.75

DPRI说明

网站或移动网站极多用户使用HiDPI设备或dPR高于1.0的笔记本电脑,所以你应该提供高分辨率图像以匹配用户期望的高视觉质量不过高分辨率图像权重更多字节并花更多时间交付, 所以你应该避免向标准DPR1.0设备发送双分辨率图像如果要向每一种设备提供不同的图像解析度,你首先需要为每个支持DPR创建多版图像,然后检测用户当前设备DPR并交付正确图像版本

创建并动态服务图像多分辨率并加动态DPR检测正确响应交付可相当挑战性正因如此我们介绍云端视屏和Hipri支持动态DPR检测和即时DPR投送.

新建特征允许您提供一图像并自动适应适合用户设备或屏幕的分辨率云化将取单图像并自动创建版本,匹配不同分辨率并飞表示高像素密度设备用户将获得巨大的视觉效果,而低DPR用户不必无谓等待大图像加载

动态图像缩放基于设备像素比

取下上传云端图像管理服务原图像为849x565像素(下方可见254x169像素缩放样本)

<\/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(\"smiling_man.jpg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\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(\"smiling_man.jpg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\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(\"smiling_man.jpg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\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('smiling_man.jpg', {quality: \"auto\", fetchFormat: \"auto\"}).toHtml();","codeSnippet":"cloudinary.imageTag('smiling_man.jpg', {quality: \"auto\", fetchFormat: \"auto\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"smiling_man.jpg\").image(quality=\"auto\", fetch_format=\"auto\")","codeSnippet":"CloudinaryImage(\"smiling_man.jpg\").image(quality=\"auto\", fetch_format=\"auto\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('smiling_man.jpg'))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","codeSnippet":"(new ImageTag('smiling_man.jpg'))\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(\"smiling_man.jpg\", array(\"quality\"=>\"auto\", \"fetch_format\"=>\"auto\"))","codeSnippet":"cl_image_tag(\"smiling_man.jpg\", array(\"quality\"=>\"auto\", \"fetch_format\"=>\"auto\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"auto\").fetchFormat(\"auto\")).imageTag(\"smiling_man.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"auto\").fetchFormat(\"auto\")).imageTag(\"smiling_man.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"smiling_man.jpg\", :quality=>\"auto\", :fetch_format=>:auto)","codeSnippet":"cl_image_tag(\"smiling_man.jpg\", :quality=>\"auto\", :fetch_format=>:auto)","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"auto\").FetchFormat(\"auto\")).BuildImageTag(\"smiling_man.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"auto\").FetchFormat(\"auto\")).BuildImageTag(\"smiling_man.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('smiling_man.jpg').transformation(Transformation()\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('smiling_man.jpg').transformation(Transformation()\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().setQuality(\"auto\").setFetchFormat(\"auto\")).generate(\"smiling_man.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\"auto\").setFetchFormat(\"auto\")).generate(\"smiling_man.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(\"auto\").fetchFormat(\"auto\")).generate(\"smiling_man.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(\"auto\").fetchFormat(\"auto\")).generate(\"smiling_man.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('smiling_man.jpg').transformation(Transformation()\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('smiling_man.jpg').transformation(Transformation()\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(\"smiling_man.jpg\")\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"smiling_man.jpg\")\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(\"smiling_man.jpg\", {quality: \"auto\", fetch_format: \"auto\"})","codeSnippet":"$.cloudinary.image(\"smiling_man.jpg\", {quality: \"auto\", fetch_format: \"auto\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\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.aaaalireno.com\/demo\/image\/upload\/f_auto,q_auto\/smiling_man.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"format":"auto","quality":"auto"}],"transformation_string":"f_auto,q_auto","url_suffix":"","version":"","secure":true,"public_id":"smiling_man.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 上传笑人照片

假设你网站或移动应用中 需要100x100剖面图片缩略图云化可实现图像即时变换下动URL和样本代码生成100x100面向检测图片版宽度并高度显示参数到100,选择填充裁剪模式带脸部重力面向检测裁剪

<\/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(\"smiling_man.jpg\")\n .resize(\n fill()\n .width(100)\n .height(100)\n .gravity(focusOn(face()))\n )\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\n .resize(\n fill()\n .width(100)\n .height(100)\n .gravity(focusOn(face()))\n )\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(\"smiling_man.jpg\")\n .resize(\n fill()\n .width(100)\n .height(100)\n .gravity(focusOn(face()))\n )\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\n .resize(\n fill()\n .width(100)\n .height(100)\n .gravity(focusOn(face()))\n )\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(\"smiling_man.jpg\")\n .resize(\n fill()\n .width(100)\n .height(100)\n .gravity(focusOn(face()))\n )\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\n .resize(\n fill()\n .width(100)\n .height(100)\n .gravity(focusOn(face()))\n )\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('smiling_man.jpg', {quality: \"auto\", width: 100, height: 100, gravity: \"face\", crop: \"fill\", fetchFormat: \"auto\"}).toHtml();","codeSnippet":"cloudinary.imageTag('smiling_man.jpg', {quality: \"auto\", width: 100, height: 100, gravity: \"face\", crop: \"fill\", fetchFormat: \"auto\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"smiling_man.jpg\").image(quality=\"auto\", width=100, height=100, gravity=\"face\", crop=\"fill\", fetch_format=\"auto\")","codeSnippet":"CloudinaryImage(\"smiling_man.jpg\").image(quality=\"auto\", width=100, height=100, gravity=\"face\", crop=\"fill\", fetch_format=\"auto\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('smiling_man.jpg'))\n\t->resize(Resize::fill()->width(100)\n->height(100)\n\t->gravity(\n\tGravity::focusOn(\n\tFocusOn::face()))\n\t)\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","codeSnippet":"(new ImageTag('smiling_man.jpg'))\n\t->resize(Resize::fill()->width(100)\n->height(100)\n\t->gravity(\n\tGravity::focusOn(\n\tFocusOn::face()))\n\t)\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(\"smiling_man.jpg\", array(\"quality\"=>\"auto\", \"width\"=>100, \"height\"=>100, \"gravity\"=>\"face\", \"crop\"=>\"fill\", \"fetch_format\"=>\"auto\"))","codeSnippet":"cl_image_tag(\"smiling_man.jpg\", array(\"quality\"=>\"auto\", \"width\"=>100, \"height\"=>100, \"gravity\"=>\"face\", \"crop\"=>\"fill\", \"fetch_format\"=>\"auto\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"auto\").width(100).height(100).gravity(\"face\").crop(\"fill\").fetchFormat(\"auto\")).imageTag(\"smiling_man.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"auto\").width(100).height(100).gravity(\"face\").crop(\"fill\").fetchFormat(\"auto\")).imageTag(\"smiling_man.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"smiling_man.jpg\", :quality=>\"auto\", :width=>100, :height=>100, :gravity=>\"face\", :crop=>\"fill\", :fetch_format=>:auto)","codeSnippet":"cl_image_tag(\"smiling_man.jpg\", :quality=>\"auto\", :width=>100, :height=>100, :gravity=>\"face\", :crop=>\"fill\", :fetch_format=>:auto)","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"auto\").Width(100).Height(100).Gravity(\"face\").Crop(\"fill\").FetchFormat(\"auto\")).BuildImageTag(\"smiling_man.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"auto\").Width(100).Height(100).Gravity(\"face\").Crop(\"fill\").FetchFormat(\"auto\")).BuildImageTag(\"smiling_man.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('smiling_man.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(100)\n.height(100)\n\t.gravity(\n\tGravity.focusOn(\n\tFocusOn.face()))\n\t)\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('smiling_man.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(100)\n.height(100)\n\t.gravity(\n\tGravity.focusOn(\n\tFocusOn.face()))\n\t)\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().setQuality(\"auto\").setWidth(100).setHeight(100).setGravity(\"face\").setCrop(\"fill\").setFetchFormat(\"auto\")).generate(\"smiling_man.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\"auto\").setWidth(100).setHeight(100).setGravity(\"face\").setCrop(\"fill\").setFetchFormat(\"auto\")).generate(\"smiling_man.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(\"auto\").width(100).height(100).gravity(\"face\").crop(\"fill\").fetchFormat(\"auto\")).generate(\"smiling_man.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(\"auto\").width(100).height(100).gravity(\"face\").crop(\"fill\").fetchFormat(\"auto\")).generate(\"smiling_man.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('smiling_man.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(100)\n.height(100)\n\t.gravity(\n\tGravity.focusOn(\n\tFocusOn.face()))\n\t)\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('smiling_man.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(100)\n.height(100)\n\t.gravity(\n\tGravity.focusOn(\n\tFocusOn.face()))\n\t)\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(\"smiling_man.jpg\")\n\t resize(Resize.fill() { width(100)\n height(100)\n\t gravity(\n\tGravity.focusOn(\n\tFocusOn.face()))\n\t })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"smiling_man.jpg\")\n\t resize(Resize.fill() { width(100)\n height(100)\n\t gravity(\n\tGravity.focusOn(\n\tFocusOn.face()))\n\t })\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(\"smiling_man.jpg\", {quality: \"auto\", width: 100, height: 100, gravity: \"face\", crop: \"fill\", fetch_format: \"auto\"})","codeSnippet":"$.cloudinary.image(\"smiling_man.jpg\", {quality: \"auto\", width: 100, height: 100, gravity: \"face\", crop: \"fill\", fetch_format: \"auto\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\n .resize(\n fill()\n .width(100)\n .height(100)\n .gravity(focusOn(face()))\n )\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"smiling_man.jpg\")\n .resize(\n fill()\n .width(100)\n .height(100)\n .gravity(focusOn(face()))\n )\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.aaaalireno.com\/demo\/image\/upload\/f_auto,q_auto,c_fill,w_100,h_100,g_face\/smiling_man.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"format":"auto","quality":"auto","crop_mode":"fill","width":"100","height":"100","gravity":"face"}],"transformation_string":"f_auto,q_auto,c_fill,w_100,h_100,g_face","url_suffix":"","version":"","secure":true,"public_id":"smiling_man.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 100x100脸部检测缩略图

现在,为了生成同一张图片,这次DPR2.0,你需要做的就是设置新dpr变换参数2.0.可见下方设置dpr参数切换1.0,2.0并3点0动态生成相同内容,相加数为100x100、200x200和300x300像素

DPR2.0缩略图URL

DPR1.0缩略图

DPR2.0缩略图

DPR3.0缩略图

DPR 1.0                   DPR 2.0                                                     DPR 3.0

嵌入这些图片时,例如HTML页面时,应设置宽度并高度显示图像标签属性三为100,尽管实际图像可能有更多像素可用,用于HiDPi设备上最优视觉结果

        <英格宽度=百元高度显示=百元src系统="//www.aaaalireno.com/res/demo/image/upload/c_fill,w_100,h_100,g_face,dpr_2.0/smiling_man.jpg"/>代码语言htmlXML高山市xml)

可创建逻辑宽度和高度图像标签(例中为100x100),而图像的URL可以是动态图像变换URL,根据给定提供大图像dpr参数化下三大图像均显示在100x100逻辑平方内,而使用HiDPi设备查看此文章后两张图像则能看到更多细节和更好的视觉结果。

DPR1.0HTML缩略图

DPR2.0html缩略图

DPR3.0HTML缩略图

DPR1.0(100x100,4.6KB)DPR2.0(200x200,12.1KB)DPR3.0(300x300,22.6KB)

图像叠加动态设备像素比

网络应用和移动网站传送图像可能更加复杂并涉及重叠问题。民心支持动态生成图像 并加载水印博客文章详解)

添加叠加时,需要叠加图像按设备所需像素密度正确调整大小(连同内含图像)。设置dpr变换参数对内装图像和内含叠加应用相同的重定规则

下URL动态生成同一张图片100x100面向检测圆缩图云型icon半透明水印填充90%封装图像宽度设置dpr值对1.0,2.0或3点0生成下列图像,同时重定位装图像和叠加匹配所需DPR

DPR2.0循环缩略图加水印URL

DPR1.0圆缩图加水印

DPR2.0圆形缩略图加水印

DPR3.0圆形缩略图加水印

DPR 1.0                   DPR 2.0                                                     DPR 3.0

创建100x100HTML图像标签并交付分辨率最匹配用户设备定像素密度的图像

DPR1.0圆缩图加水印HTML

DPR2.0圆形缩略图和HTML水印

DPR3.0圆形缩略图和HTML水印

DPR1.0(100x100,4.8KB)DPR2.0(200x200,12.8KB)DPR3.0(300x300,23.1KB)

DPR自动检测并交付最佳图像质量jQuery

向用户自动提供正确的DPR版本图像时,需要检测用户设备上的DPR网络应用或移动网站多为动态化并生成服务器端时,一种方法就是检查用户代理请求页眉并用它设置嵌入页面图像正确DPR值

用户代理解决方案可能误导-例如请求头显示用户设备Macbook Pro Retina高DPR,但事实上实际显示为外部HD监视器低DPR

云端插件jQuery解决了这个问题,客户端Jawarscript代码检测用户当前显示的实际设备像素比云形允许你动态构建图像URL 最匹配DPR值并懒惰地使用Jaavascript装入实际图像单行代码可以实现所有这一切

类=扁皮数据src="https://res.www.aaaalireno.com/demo/image/upload/c_fill,dpr_auto,h_200,w_150/lupine.jpg"/>代码语言JavaScript高山市javascript)

来解释一下这工作方式上方图像标签src系统属性不设置(您可以设置为占位空白图像等/images/blank.gif)上头数据弧码属性设置为远程图像的 URL模板上传至云形,同时裁剪成 150x200矩形URL模板包含dpr_aut指令允许jQuery插件动态生成带正确DPR值的实际图像(例如dpr_1.0dpr_2.0

所有你需要做的使网站响应视网膜和Hipri屏幕, 是在网站中加入云端jQuery插件(见插件插件插件)。开始向导并添加下文jaavascript命令

$.cloudinary.responsive();代码语言JavaScript高山市javascript)

方法查找页面中所有图象sldhidpi类检测设备像素比并相应更新HTML图像标签即使是用同一种设备从视网膜切换非视网膜显示器,也会生成正确基于DPR的URL

使用自定义jQuery选择并应用cloudinary_update方法 :

$('img.my_dymamic_images').cloudinary_update();代码语言JavaScript高山市javascript)

服务器端变换页仍可享受浏览器端自动设备像素比检测,如上所示使用云式视图助手方法时Cl_image_tagRuby on Rails)中,你可以设置新dpr参数切换汽车.创建 HTML 图像标签带空src系统属性同时数据弧码动态图像变换URL属性点

时加载云性jQuery插件并调用$.cloudinary.responsive();图像标签自动更新,并用正确的DPR值替换URL也可以使用定位图像设置responsive_placeholder参数或设为默认内置空白图像

100, :height => 150, :crop => :fill, \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:dpr => :auto, :responsive_placeholder => \"blank\") %>","codeSnippet":"<%= cl_image_tag(\"lupine.jpg\", :width => 100, :height => 150, :crop => :fill, \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:dpr => :auto, :responsive_placeholder => \"blank\") %>"},{"sdkId":"php","framework":"php","language":"php","displayName":"PHP","packageName":"cloudinary_php","packageVersion":"1.x","packageStatus":"legacy","rawCodeSnippet":" 100, \"height\" => 150, \"crop\" => \"fill\",\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"dpr\" => \"auto\", \"responsive_placeholder\" => \"blank\"))!?>","codeSnippet":" 100, \"height\" => 150, \"crop\" => \"fill\",\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"dpr\" => \"auto\", \"responsive_placeholder\" => \"blank\"))!?>"},{"sdkId":"python","framework":"python","language":"python","displayName":"Python","packageName":"cloudinary","packageVersion":"1.x","packageStatus":"","rawCodeSnippet":"cloudinary.CloudinaryImage(\"lupine.jpg\").image(width = 100, \u00a0height = 150, \u00a0crop = \"fill\", \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dpr = \"auto\", responsive_placeholder = \"blank\")","codeSnippet":"cloudinary.CloudinaryImage(\"lupine.jpg\").image(width = 100, \u00a0height = 150, \u00a0crop = \"fill\", \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dpr = \"auto\", responsive_placeholder = \"blank\")"},{"sdkId":"nodejs","framework":"nodejs","language":"javascript","displayName":"Node.js","packageName":"cloudinary","packageVersion":"1.x","packageStatus":"","rawCodeSnippet":"cloudinary.image(\"lupine.jpg\", \u00a0{ width: 100, height: 150, crop: 'fill',\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dpr: 'auto', responsive_placeholder: 'blank' })","codeSnippet":"cloudinary.image(\"lupine.jpg\", \u00a0{ width: 100, height: 150, crop: 'fill',\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dpr: 'auto', responsive_placeholder: 'blank' })"}]" parsed-url="[]" with-url="false" > 加载代码示例

下HTML图像标签由上方代码样本生成

类=扁皮高度=150宽度=百元数据src="https://res.www.aaaalireno.com/demo/image/upload/c_fill,dpr_auto,h_150,w_100/lupine.jpg"src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>代码语言JavaScript高山市javascript)

加载代码示例 Lupin缩略图带动态DPR

摘要

web应用和移动网站需要越来越多响应支持各种设备、分辨率、方位比和像素密度向高分辨率设备传送适当质量图像很重要,同时防止不必要地向低分辨率设备发送大图像,通过增加页加载时间来浪费带宽并伤害用户体验

云化图像处理更容易支持视网膜和HIPI设备,即根据设备像素比执行即时生成图像和缩略图面向所有广受欢迎的开发框架的云形SDKs使用jQuery插件客户端支持允许自动检测用户设备像素比和以适当分辨率即时传送图像-无需提前编译图像

视网膜和Hipri支持大响应设计挑战的一部分, 并出现更多特征, 将方便进程 使网站应用完全响应更多细节快来

动态DPR检测和云基图像重定位可供云型所有计划使用,包括我们的计划自由计划.确定更新您的云客户库和jQuery插件最新版本和往常一样,我们期待你对这一新特征的想法和反馈,因为我们开发更多图像管理能力,使响应式设计更容易实现。

想要更多了解图像优化

相关类别

回顶

相关类别

特征邮箱

Baidu
map