每一张图片都是独一无二的，你的每一个网站访问者都是不同的。在一个完美的世界里，我们希望对每个图像进行单独调整，使之适合每个用户。"恰到好处"被完美裁剪，使用响应的尺寸、正确的编码设置和最佳的图像质量格式。这里这是一个简单的例子，它使用了一只（…鼓卷…）猫的照片：现在，我们需要调整图像以适应每个设备和浏览器上的图形设计。图像应该在任何分辨率和网站布局，它应该提供优化，以提高网站性能。URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/c_fill，银币4:6，自动/自动，自动，自动/白色_猫.jpgRuby：复制到剪贴板cl\u image_tag（"白色_类别jpg"，：client_hints=>true，：transformation=>[{：纵横比=>"4:6"，：gravity=>"auto"，：crop=>"fill"}，{:width=>"自动"，：quality=>"auto"，：fetch_format=>：auto，：crop=>"scale"}])PHP:复制到剪贴板cl\u image_tag（"白色_类别jpg，数组（"客户端提示"=>true，"转换"=>array(数组（"纵横比"=>"4:6"，"重力"=>"自动"，"裁剪"=>"填充"），数组（"宽度"=>"自动"，"质量"=>"自动"，"获取格式"=>"自动"，"裁剪"=>"缩放"）)))Python:复制到剪贴板CloudinaryImage（"白色_类别jpg"）.image（客户端提示=True，转换=[{'纵横比'："4:6"，'重力'："自动"，'裁剪'："填充"}，{'width'："自动"，"质量"："auto"，"fetch_format"："auto"，"crop"："scale"}])节点.js：复制到剪贴板cloudinary.image（"白色_类别jpg"，{client_提示：true，转换：[{纵横比："4:6"，重力："自动"，裁剪："填充"}，{宽度："auto"，质量："auto"，fetch_format:"auto"，裁剪："scale"}]})Java:复制到剪贴板cloudinary.url（）.转换（新转换（）.aspectRatio（"4:6"）.gravity（"auto"）.crop（"fill"）.chain（）.width（"auto"）.quality（"auto"）.fetchFormat（"auto"）.crop（"scale"））.clients（true）.imageTag（"白色_类别jpg");JS:复制到剪贴板cloudinary.imageTag（白色_类别jpg'，{clients:true，转换：[{aspectRatio:"4:6"，重力："auto"，裁剪："fill"}，{宽度："auto"，质量："auto"，fetchFormat："auto"，裁剪："scale"}]}).toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"白色_类别jpg"，{client_提示：true，转换：[{纵横比："4:6"，重力："自动"，裁剪："填充"}，{宽度："auto"，质量："auto"，fetch_format:"auto"，裁剪："scale"}]})反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（新转换（）.AspectRatio（"4:6"）.Gravity（"auto"）.Crop（"fill"）.Chain（）.Width（"auto"）.Quality（"auto"）.FetchFormat（"auto"）.Crop（"scale"））.clients（true）.BuildImageTag（"白色_类别jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新转换（）.aspectRatio（"4:6"）.gravity（"auto"）.crop（"fill"）.chain（）.width（"auto"）.quality（"auto"）.fetchFormat（"auto"）.crop（"scale"））.clients（true）.generate（"白色_类别jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setAspectRatio（"4:6"）.setGravity（"自动"）.setCrop（"填充"）.chain（）.setWidth（"auto"）.setQuality（"auto"）.setFetchFormat（"auto"）.setCrop（"scale"））.generate（"白色_类别jpg")!，cloudinary:云数据库）左边的图像是一个标准裁剪，以原始2000px图像高度的标准JPEG格式发送，生成一个537KB的大文件。然而，右边的图片被完美的裁剪，缩小到300px的宽度，在Chrome上作为一个优化的17KB WebP图像提供（节省了97%的带宽）。一个图像一个用户一个用户的优化交付是相当具有挑战性的。它需要在复杂的文件格式、视觉算法和浏览器支持方面有相当多的专业知识。当你想把可能上传到你的网站和手机上的图片扩展到数十万甚至数亿的时候，这个挑战就变得更加复杂了应用程序。所以如何实现这一点，以及如何自动将其应用于您自己的网站和移动应用程序？图像解决当我们4年多前推出云计算服务时，我们希望消除管理web和移动应用程序映像所需的研发时间。由开发人员为开发人员编写的服务，旨在为他们的所有图像需求提供一个完整的解决方案。今天，我们兴奋地介绍一个重要的里程碑，通过达到图像的状态来实现我们的愿景解决了。开发者要创造完美的图像作物聚焦在最重要的区域。开发人员需要确定每个图像的最佳文件格式和编码器设置，以最少的字节数完美地表示内容，以获得快速和流畅的用户体验。开发人员需要为每个图像创建多个变体，以便在不同的设备上以不同的方式响应交付决心。每一个图片的内容是独一无二的，每个访问你网站的人都有不同的设备、分辨率、浏览器和网络速度。向每个用户提供一个最佳图像是一个挑战，尤其是当您需要将其扩展到数百、数千或数百万时图像。那个这里介绍的"图像解决"解决方案，使用自动内容感知和上下文感知图像自适应，将Cloudinary基于云的媒体管理解决方案提升到一个新的水平。其概念是让用户上传任何图像的一个高分辨率副本，然后自动实时调整图像，以聚焦图像的最重要区域，选择最佳质量和编码设置，并以任何分辨率或像素密度将图像发送到任何设备。我们希望通过自动化以下关键图像处理和交付组件，进一步简化开发人员的工作：自动内容感知裁剪-g峎auto智能内容感知编码-qu auto动态格式选择-自动自动响应图像-w_auto和dpr_auto自动内容感知裁剪-对于任何网站设计，特别是任何响应式设计，"g峎u auto"并不总是足够简单地缩放图像-图像通常需要裁剪以适应不同的设备布局、分辨率和纵横比，同时最大限度地提高图像中重要区域的可见性。如果您的web应用程序包含大量用户生成的内容和动态响应，那么手动裁剪单个图像以适应不同分辨率是非常耗费资源的，而且是不可能的布局。裁剪默认情况下，将所有图像聚焦在图像中心会导致重要内容丢失。Cloudinary已经支持面部检测来完美地裁剪照片，但是如果您想关注的不仅仅是面部，或者图像对象是产品、食品或宠物，该怎么办？Cloudinary内容感知裁剪算法使用启发式组合自动检测每个图像中的感兴趣区域，然后动态裁剪它们（使用动态URL），以适应在任何设备上查看时站点的图形设计和布局，并且不会失去对重要内容的关注内容。用于例如，下图已上载到云：现在我们需要调整此图像以适应网站上的三个不同页面：横向（例如800x200）、纵向（例如300x600）和正方形（例如300x300）。正如您在下面看到的，标准的中心裁剪带来了问题的结果，因为大多数cat被忽略了。将gravity图像裁剪参数设置为auto或在下面的动态图像处理URL中使用g嫒auto，生成最佳裁剪结果，确保cat始终included.urlrubyphpythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w_300，沪600，cĔfill，gđu auto/沙发_猫.jpgRuby：复制到剪贴板cl_image_tag（"沙发_类别jpg"，：width=>300，：height=>600，：gravity=>"自动"，：crop=>"fill"）PHP:复制到剪贴板cl_image_tag（"沙发_类别jpg"，数组（"宽度"=>300，"高度"=>600，"重力"=>"自动"，"裁剪"=>"填充"））Python:复制到剪贴板CloudinaryImage（"沙发_类别jpg"）.image（宽度=300，高度=600，重力="自动"，裁剪="填充"）节点.js：复制到剪贴板cloudinary.image（"沙发_类别jpg，{宽度：300，高度：600，重力："自动"，裁剪："填充"}）Java:复制到剪贴板cloudinary.url（）.变换（新变换（）.宽度（300）.高度（600）.gravity（"auto"）.crop（"fill"））.imageTag（"沙发_类别jpg");JS:复制到剪贴板cloudinary.imageTag（沙发_类别jpg'，{width:300，height:600，重力："auto"，crop:"fill"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"沙发_类别jpg，{宽度：300，高度：600，重力："自动"，裁剪："填充"}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Width（300）.Height（600）.Gravity（"auto"）.Crop（"fill"））.BuildImageTag（"沙发_类别jpg")安卓：C