在本系列博客的第1部分中，我们向您介绍了如何利用Cloudinary iOS和Android SDK中提供的新的预上传图像处理功能来优化从移动应用程序上载用户图像的过程。我们展示了如何在上传之前将所有用户图片缩小到所需的最大尺寸，以节省带宽并改进应用程序性能。在这一部分，我将向您展示如何实现我们新的响应图像解决方案，这使您能够根据请求设备的分辨率和可用尺寸来优化所提供的图像。这个新功能可以帮助您简化为每个媒体资产创建多个变体的许多复杂性，并通过CDN进行动态操作和快速交付。网络研讨会什么是移动响应图像传送？具有响应性的移动应用程序设计意味着内容对应用程序环境做出响应。在媒体资产范围内，这意味着应根据设备大小和布局自动调整图像以获得最佳观看效果。作为移动开发者，我们应该努力针对不同的屏幕大小和密度来优化我们的应用程序，并且我们有责任小心我们关于像素和带宽的假设，因为并非所有用户都拥有高端设备或强大的互联网连接。支持多种设备大小和慢速连接Android生态系统有成千上万种不同的设备，它们提供不同的硬件功能、屏幕大小和密度。iOS的可能性要小得多，但它仍有很多可以添加到混合。你听说今天销售的Android新设备中有25%只有512MB的RAM，这可能也会让人吃惊。这些设备大多出现在印度等新兴市场，但绝对不仅如此那里。而且根据OpenStand，当谈到移动互联网连接时，即使在像德国、意大利、法国和英国这样的国家，4G用户连接LTE网络的机会也比硬币翻转好。这意味着，即使我们的手机和移动供应商支持它，我们也不能总是享受到高速网络带来的好处。图像来源：igvita.com网站：弹性网络使您的图像更具响应性，云服务器设备，可以改善用户体验，并将用户的数据计划使用量降至最低。如果没有大屏幕或低带宽的设备发送图像，那么对于每一个用户来说都是最好的选择。不同的设备和不同的显示尺寸交付响应图像还要求我们了解原始图像的大小、质量和格式，并根据最终用户的目标视图和平台进行调整。问题非常清楚下面的截图突出了上面描述的挑战。左边的屏幕截图显示了一个可以下载原始图像的移动应用程序。它们看起来很棒，但下载费用却很高——只有10兆字节的缩略图才能填满屏幕。右边的屏幕截图显示了相同的应用程序集，可以以100px的固定宽度下载所有缩略图。这些图像的下载大小非常小，每个大小约为40千字节，甚至在较小的设备上看起来也很合理，但在大屏幕或高密度设备上看起来却很糟糕。高质量、大文件大小文件小，但质量差这个应用程序需要的是一种简单的方式，将不同的图像大小传送到不同的设备上，永远不要超过定义的图像视图在每个设备上看起来不错的最大分辨率大小。云作为移动媒体管理的一站式服务，云数据库可以帮助降低维护和生成多个图像版本的复杂性其动态图像处理功能。您可以构建云动态图像url来定义您想要的任何图像宽度和高度。这意味着您不必预先创建每个图像的数百个版本。取而代之的是，在交付之前，根据需要动态调整图像大小。使用Cloudinary，您可以将单个高分辨率图像上载到云中，并根据目标设备通过URL参数以不同的大小发送给您的用户（您不认识他们）。为了使事情变得更简单，您现在可以使用我们的移动响应解决方案，它不仅节省了昂贵的开发时间，还可以自动处理许多（许多，许多）设备屏幕大小所需图像尺寸的计算。图片来源：OpenSignal 2015:Android设备碎片化在delivery命令中包含responsive选项时，Cloudinary首先检索请求图像的图像视图元素的确切可用尺寸，然后将高度和宽度向上舍入到最近的步长（默认为100）。例如，如果确切的图像视图宽度是284X284像素，则动态生成300X300像素宽度的图像并将其传送到请求设备。此功能可防止生成过多的映像版本，并减少来自其他设备的后续请求的缓存命中率。下次任何测量201-300像素的图像视图请求相同的图像时，现有的300X300图像直接从CDN发送缓存。不此解决方案只会节省预生成数十或数百个图像的工作量；它还消除了对所需图像大小和数量的猜测。这种猜测几乎不可避免地导致一些传送的图像对于图像视图来说太小，云指，从而导致质量差，而另一些则可能明显过大，从而导致带宽浪费。让我们在actionandroidy中看到它：根据指定的ImageView元素，使用MediaManager的responsiveUrl和generate方法生成基于图像所需维度的动态图像URL。例如，要生成示例图像的responsiveUrl，将自动调整大小以填充可用宽度和高度：复制到剪贴板媒体管理器.get（）.responsiveUrl（true，true，大数据要学什么，"fill"，"auto"）.generate（"示例"，profileImageView，大数据与数据挖掘，新建）响应URL.Callback（）{@重写public void onUrlReady（Url Url）{/*使用您最喜欢的图像下载库获取图像，毕加索示例：*/毕加索（上下文）。加载(url.生成（））.into（imageView）；}}；iOS与iOS不同，因为响应方法是在UIImageView组件级别提供的。例如，下面是如何将名为photoImageView的iOS UIImageView组件设置为以JPEG格式响应地获取和显示示例图像，并自动调整大小以填充可用的宽度和高度：复制到剪贴板让transformation=CLDTransformation（）.setFetchFormat（"jpg"）设params=CLDResponsiveParams（autoWidth:true，autoHeight:true，cropMode:"填充"，重力："auto"）照片图像视图.cldSetImage（publicId:"示例"，云数据库：cld，资源类型："图像"，响应参数：参数，转换：转换）有关这些方法用法的更多信息，大数据概念，请查看我们针对Android和ios的响应文档还记得我们之前展示的那些屏幕截图中有问题的文件大小和质量吗？好吧，通过上面所示的简单代码，您可以得到每个设备的最佳图像大小。有了这个代码，我们上面描述的同一个应用程序现在根据屏幕大小和密度缩放图像。对于小的、低密度的屏幕，图像的传输速度约为30-40 Kb。对于大型、高密度屏幕，这些图像的传输速度将高达200-250KB（与最初的10MB图像相比仍然相差甚远，而且视觉质量也很好）。让我们总结一下这篇文章演示了Cloudinary如何通过根据请求设备实时自动计算来优化所需图像大小和图像数量之间的权衡。这使您能够通过添加一行代码。输入我们的前一篇文章，我们展示了如何使用我们的另一个新功能，预上传处理，根据你期望的最大尺寸来调整用户生成内容的客户端大小，只上传调整大小的图像。使用iOS和Android SDK的新功能，可以节省用户在应用程序和应用程序开发过程中的宝贵时间和时间。如果你还没有Cloudinary帐户，请注册一个免费帐户，安装iOS和/或Android SDK，并了解如何快速改善用户体验。哦，如果你有一个基于web的应用程序版本，一定要看看如何在浏览器。我们迫不及待地想知道您将如何使用这些新功能，我们很想知道它们如何提高您的本机移动设备的性能进一步应用阅读响应图像具有Cloudinary的响应图像自动裁剪图像，实现响应式设计，提高图像质量响应图像：srcset和size HTML图像属性通过3个简单的步骤使网站上的所有图片都能响应响应式Web设计的最佳实践