搜索排名算法使用各种信号确定网站通过桌面或移动搜索在互联网上相互排名信号之一是网站速度2010年谷歌介绍性网站速度信号化搜索排名算法然而,这只适用于网页搜索排名自2018年7月起网站速度将是一个移动搜索排名因子改变是另一个信号 开发者必须醒悟并专注于提高应用性能, 因为速度加载时间会影响用户对网页的经验
显示HTTPARSI网站平均重量约64%为图像73%移动互联网用户在其设备上经历页加载时间问题。页面加载延迟一秒可使访问者满意度下降16%并可能导致转换率下降7%或以上
文章中,我将解答为何小节图像优化远道帮助网站快速加载移动设备并最终提高移动搜索排名
决策前,你需要辨识问题面向网站哪些图像需要优化,并没那么难
与强者执行详细图像分析审核网站高速测试图像分析工具.工具提供图像大小、格式、质量和编码信息并提供可操作小技巧 提高页面加载速度
分析移动网站检查下文分析的快照
页面分析摘要:43图像,页面图像强度:6MB
第一图像太重JPEG(28KB)、JPEG-XR(26.2KB)和PNG(141.5KB)可优化使用
更多细节取首映像并优化下文重题
等级分析左侧优化右转JPEG支持各种浏览器显示略超尺寸JPEG-XR只支持互联网探索器和微软边缘号一号算法链接引导修复,即优化图像
埃里克波蒂斯写作做得很好深入文章聚焦网站快速测试图像分析工具如何工作
快速透视图像优化技术 云化很容易实现
优化图像质量q_aut:
使用q_aut参数、最优质量压缩水平和最优编码设置基于特定图像内容、格式和浏览器选择结果是图像视觉质量优美并压缩文件大小例举 :
<\/Image>","codeSnippet":"
![]()
\n\t
\n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"woman.jpg\").delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"woman.jpg\").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(\"woman.jpg\").delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"woman.jpg\").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(\"woman.jpg\").delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"woman.jpg\").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('woman.jpg', {quality: \"auto\"}).toHtml();","codeSnippet":"cloudinary.imageTag('woman.jpg', {quality: \"auto\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"woman.jpg\").image(quality=\"auto\")","codeSnippet":"CloudinaryImage(\"woman.jpg\").image(quality=\"auto\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('woman.jpg'))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","codeSnippet":"(new ImageTag('woman.jpg'))\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(\"woman.jpg\", array(\"quality\"=>\"auto\"))","codeSnippet":"cl_image_tag(\"woman.jpg\", array(\"quality\"=>\"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\")).imageTag(\"woman.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"auto\")).imageTag(\"woman.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"woman.jpg\", :quality=>\"auto\")","codeSnippet":"cl_image_tag(\"woman.jpg\", :quality=>\"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\")).BuildImageTag(\"woman.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"auto\")).BuildImageTag(\"woman.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('woman.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('woman.jpg').transformation(Transformation()\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\")).generate(\"woman.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\"auto\")).generate(\"woman.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\")).generate(\"woman.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(\"auto\")).generate(\"woman.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('woman.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('woman.jpg').transformation(Transformation()\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(\"woman.jpg\")\n\t delivery(Delivery.quality(\n\tQuality.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"woman.jpg\")\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(\"woman.jpg\", {quality: \"auto\"})","codeSnippet":"$.cloudinary.image(\"woman.jpg\", {quality: \"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(\"woman.jpg\").delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"woman.jpg\").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\/q_auto\/woman.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"quality":"auto"}],"transformation_string":"q_auto","url_suffix":"","version":"","secure":true,"public_id":"woman.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
其它选项q_aut:best,q_ato:low,q_aut:good或q_aut:eco保证比平均质量高
可手动设置q#参数质量取下示例
<\/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(\"sample.jpg\").delivery(quality(60));","codeSnippet":"new CloudinaryImage(\"sample.jpg\").delivery(quality(60));","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(\"sample.jpg\").delivery(quality(60));","codeSnippet":"new CloudinaryImage(\"sample.jpg\").delivery(quality(60));","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(\"sample.jpg\").delivery(quality(60));","codeSnippet":"new CloudinaryImage(\"sample.jpg\").delivery(quality(60));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('sample.jpg', {quality: 60}).toHtml();","codeSnippet":"cloudinary.imageTag('sample.jpg', {quality: 60}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"sample.jpg\").image(quality=60)","codeSnippet":"CloudinaryImage(\"sample.jpg\").image(quality=60)","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('sample.jpg'))\n\t->delivery(Delivery::quality(60));","codeSnippet":"(new ImageTag('sample.jpg'))\n\t->delivery(Delivery::quality(60));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"sample.jpg\", array(\"quality\"=>60))","codeSnippet":"cl_image_tag(\"sample.jpg\", array(\"quality\"=>60))","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(60)).imageTag(\"sample.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(60)).imageTag(\"sample.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"sample.jpg\", :quality=>60)","codeSnippet":"cl_image_tag(\"sample.jpg\", :quality=>60)","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(60)).BuildImageTag(\"sample.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(60)).BuildImageTag(\"sample.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(60)));","codeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(60)));","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(60)).generate(\"sample.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(60)).generate(\"sample.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(60)).generate(\"sample.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(60)).generate(\"sample.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(60)));","codeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.delivery(Delivery.quality(60)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"sample.jpg\")\n\t delivery(Delivery.quality(60)) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"sample.jpg\")\n\t delivery(Delivery.quality(60)) \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(\"sample.jpg\", {quality: 60})","codeSnippet":"$.cloudinary.image(\"sample.jpg\", {quality: 60})","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(\"sample.jpg\").delivery(quality(60));","codeSnippet":"new CloudinaryImage(\"sample.jpg\").delivery(quality(60));","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_60\/sample.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"quality":"60"}],"transformation_string":"q_60","url_suffix":"","version":"","secure":true,"public_id":"sample.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
上头q_60上方参数下降交付文件大小118KB至73KB.
优化图像格式f_aut:
选择正确格式交付每一图像可节省大量文件体积而不牺牲质量上头f_aut参数使云化分析图像内容并选择最佳交付格式举例说,它可以自动向Chrome浏览器或JPEG-XR发送图像,同时使用原创格式面向所有其他浏览器都使用f_aut并q_aut云化仍然会向相关浏览器提供WebP和JPEG-XR,但如果质量算法判定为最优则可能以PNG-8或PNG-24提供所选图像
优化图像缩放dpr_aut并w_aut:
提供全尺寸图像并依赖浏览器端重定位(使用CSS或HTML宽度和高度属性)时,用户被迫不必要下载大图像因此图像应始终从服务器上以最终尺寸交付云化操作服务器重定位,从而使图像能按请求大小交付浏览器
可确保大或高分辨率图像只传送给设备分辨率或浏览器尺寸需要的用户dpr_aut并w_aut.检查示例 :
<\/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(\"sample.jpg\")\n .resize(fill().aspectRatio(ar4X3()))\n .resize(scale().width(\"auto\"))\n .delivery(dpr(auto()));","codeSnippet":"new CloudinaryImage(\"sample.jpg\")\n .resize(fill().aspectRatio(ar4X3()))\n .resize(scale().width(\"auto\"))\n .delivery(dpr(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\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(\"sample.jpg\")\n .resize(fill().aspectRatio(ar4X3()))\n .resize(scale().width(\"auto\"))\n .delivery(dpr(auto()));","codeSnippet":"new CloudinaryImage(\"sample.jpg\")\n .resize(fill().aspectRatio(ar4X3()))\n .resize(scale().width(\"auto\"))\n .delivery(dpr(auto()));","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(\"sample.jpg\")\n .resize(fill().aspectRatio(ar4X3()))\n .resize(scale().width(\"auto\"))\n .delivery(dpr(auto()));","codeSnippet":"new CloudinaryImage(\"sample.jpg\")\n .resize(fill().aspectRatio(ar4X3()))\n .resize(scale().width(\"auto\"))\n .delivery(dpr(auto()));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('sample.jpg', {transformation: [ {aspectRatio: \"4:3\", crop: \"fill\"}, {width: \"auto\", dpr: \"auto\", crop: \"scale\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('sample.jpg', {transformation: [\n {aspectRatio: \"4:3\", crop: \"fill\"},\n {width: \"auto\", dpr: \"auto\", crop: \"scale\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"sample.jpg\").image(transformation=[ {'aspect_ratio': \"4:3\", 'crop': \"fill\"}, {'width': \"auto\", 'dpr': \"auto\", 'crop': \"scale\"} ])","codeSnippet":"CloudinaryImage(\"sample.jpg\").image(transformation=[\n {'aspect_ratio': \"4:3\", 'crop': \"fill\"},\n {'width': \"auto\", 'dpr': \"auto\", 'crop': \"scale\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('sample.jpg'))\n\t->resize(Resize::fill()\n\t->aspectRatio(\n\tAspectRatio::ar4X3())\n\t)\n\t->resize(Resize::scale()->width(\"auto\"))\n\t->delivery(Delivery::dpr(\n\tDpr::auto()));","codeSnippet":"(new ImageTag('sample.jpg'))\n\t->resize(Resize::fill()\n\t->aspectRatio(\n\tAspectRatio::ar4X3())\n\t)\n\t->resize(Resize::scale()->width(\"auto\"))\n\t->delivery(Delivery::dpr(\n\tDpr::auto()));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"sample.jpg\", array(\"transformation\"=>array( array(\"aspect_ratio\"=>\"4:3\", \"crop\"=>\"fill\"), array(\"width\"=>\"auto\", \"dpr\"=>\"auto\", \"crop\"=>\"scale\") )))","codeSnippet":"cl_image_tag(\"sample.jpg\", array(\"transformation\"=>array(\n array(\"aspect_ratio\"=>\"4:3\", \"crop\"=>\"fill\"),\n array(\"width\"=>\"auto\", \"dpr\"=>\"auto\", \"crop\"=>\"scale\")\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().aspectRatio(\"4:3\").crop(\"fill\").chain() .width(\"auto\").dpr(\"auto\").crop(\"scale\")).imageTag(\"sample.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .aspectRatio(\"4:3\").crop(\"fill\").chain()\n .width(\"auto\").dpr(\"auto\").crop(\"scale\")).imageTag(\"sample.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"sample.jpg\", :transformation=>[ {:aspect_ratio=>\"4:3\", :crop=>\"fill\"}, {:width=>\"auto\", :dpr=>\"auto\", :crop=>\"scale\"} ])","codeSnippet":"cl_image_tag(\"sample.jpg\", :transformation=>[\n {:aspect_ratio=>\"4:3\", :crop=>\"fill\"},\n {:width=>\"auto\", :dpr=>\"auto\", :crop=>\"scale\"}\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().AspectRatio(\"4:3\").Crop(\"fill\").Chain() .Width(\"auto\").Dpr(\"auto\").Crop(\"scale\")).BuildImageTag(\"sample.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .AspectRatio(\"4:3\").Crop(\"fill\").Chain()\n .Width(\"auto\").Dpr(\"auto\").Crop(\"scale\")).BuildImageTag(\"sample.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.resize(Resize.fill()\n\t.aspectRatio(\n\tAspectRatio.ar4X3())\n\t)\n\t.resize(Resize.scale().width(\"auto\"))\n\t.delivery(Delivery.dpr(\n\tDpr.auto())));","codeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.resize(Resize.fill()\n\t.aspectRatio(\n\tAspectRatio.ar4X3())\n\t)\n\t.resize(Resize.scale().width(\"auto\"))\n\t.delivery(Delivery.dpr(\n\tDpr.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().setAspectRatio(\"4:3\").setCrop(\"fill\").chain() .setWidth(\"auto\").setDpr(\"auto\").setCrop(\"scale\")).generate(\"sample.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setAspectRatio(\"4:3\").setCrop(\"fill\").chain()\n .setWidth(\"auto\").setDpr(\"auto\").setCrop(\"scale\")).generate(\"sample.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().aspectRatio(\"4:3\").crop(\"fill\").chain() .width(\"auto\").dpr(\"auto\").crop(\"scale\")).generate(\"sample.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .aspectRatio(\"4:3\").crop(\"fill\").chain()\n .width(\"auto\").dpr(\"auto\").crop(\"scale\")).generate(\"sample.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.resize(Resize.fill()\n\t.aspectRatio(\n\tAspectRatio.ar4X3())\n\t)\n\t.resize(Resize.scale().width(\"auto\"))\n\t.delivery(Delivery.dpr(\n\tDpr.auto())));","codeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.resize(Resize.fill()\n\t.aspectRatio(\n\tAspectRatio.ar4X3())\n\t)\n\t.resize(Resize.scale().width(\"auto\"))\n\t.delivery(Delivery.dpr(\n\tDpr.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(\"sample.jpg\")\n\t resize(Resize.fill() {\n\t aspectRatio(\n\tAspectRatio.ar4X3())\n\t })\n\t resize(Resize.scale() { width(\"auto\") })\n\t delivery(Delivery.dpr(\n\tDpr.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"sample.jpg\")\n\t resize(Resize.fill() {\n\t aspectRatio(\n\tAspectRatio.ar4X3())\n\t })\n\t resize(Resize.scale() { width(\"auto\") })\n\t delivery(Delivery.dpr(\n\tDpr.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(\"sample.jpg\", {transformation: [ {aspect_ratio: \"4:3\", crop: \"fill\"}, {width: \"auto\", dpr: \"auto\", crop: \"scale\"} ]})","codeSnippet":"$.cloudinary.image(\"sample.jpg\", {transformation: [\n {aspect_ratio: \"4:3\", crop: \"fill\"},\n {width: \"auto\", dpr: \"auto\", crop: \"scale\"}\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(\"sample.jpg\")\n .resize(fill().aspectRatio(ar4X3()))\n .resize(scale().width(\"auto\"))\n .delivery(dpr(auto()));","codeSnippet":"new CloudinaryImage(\"sample.jpg\")\n .resize(fill().aspectRatio(ar4X3()))\n .resize(scale().width(\"auto\"))\n .delivery(dpr(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\/ar_4:3,c_fill\/c_scale,w_auto,dpr_auto\/sample.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"aspect_ratio":"4:3","crop_mode":"fill"},{"crop_mode":"scale","width":"auto","dpr":"auto"}],"transformation_string":"ar_4:3,c_fill\/c_scale,w_auto,dpr_auto","url_suffix":"","version":"","secure":true,"public_id":"sample.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
上例产生318KB文件dPR2.0设备115KB上DPR1.0设备将自动缩放到响应布局图像可用宽度上,并配有适合用户设备DPR值
web开发者使用各种编程语言构建网站贝斯特登录入口官网下载并检视WordPress图像优化资源:
- PHP图像优化.
- Ruby图像优化.
- Python图像优化.
- WordPress图像优化.
更多图像优化阅读可查看这些文章:
提高页面性能的最佳方法之一是通过图像优化越快加载页数,越有可能实现更好的移动搜索排名不要把性能和移动搜索排名增益留在表上,云化脱机
页面分析摘要:43图像,页面图像强度:6MB
第一图像太重JPEG(28KB)、JPEG-XR(26.2KB)和PNG(141.5KB)可优化使用
等级分析左侧优化右转JPEG支持各种浏览器显示略超尺寸JPEG-XR只支持互联网探索器和微软边缘号一号算法链接引导修复,即优化图像
