太长，读不下去了Chrome35引入了客户端提示，这是一种简化响应图像的工具。Cloudinary快速部署了许多客户端提示支持的功能：使用w峎auto，可以使图像适合其布局宽度。自从该特性首次发布以来，它的字节大小平均比基线节省了42%（51KB）。使用dpr_auto，您可以为60%的高dpr显示用户（65%的桌面用户；95%的手机用户）增强图像为清晰的高dpr图像，同时确保默认值仍然是1x基准图像。我们让q嫒自动意识到Save Data提示，从而节省了更多的字节。一个月前，有人担心客户端提示在跨网站跟踪用户的潜力。因此，桌面chrome67/暂时/停止向第三方和子域发送客户端提示，例如res.cloudinary.com网站以及images.example.com.我们向Chrome团队提供了一些反馈，确保Cloudinary的客户端提示功能在移动Chrome上仍然有效。一旦功能策略规范的工作和实现完成，桌面Chrome将再次工作。客户机提示是什么？2015年，Chrome35增加了对客户端提示的支持。客户提示太棒了！通过客户端提示，您可以简化响应图像所需的HTML，确保图像在高DPR显示上清晰，并提高webperf。在撰写本文时，Chrome 35+是唯一采用此标准的浏览器。Cloudinary引入了对w_auto、dpr廑u auto和q_auto参数的支持。要刷新内存，四个主要的客户端提示是：Viewport Width：这是浏览器窗口的宽度，以CSS像素为单位。在移动设备上，这个宽度几乎总是屏幕大小的100%，通常在320像素（CSS）左右。这是设备的像素比率。对于移动设备，这个比率通常在2-4之间。桌面显示器的DPR也越来越高。宽度：这是屏幕上显示的图像的实际宽度（以设备像素为单位）。注意：仅当您还添加

属性时才会发送此宽度。保存数据：这个标志在蜂窝网络上特别有用，表示服务器应该帮助减少数据。（为完整起见，此提示已移到NetInfo规范中。）客户提示最近对我做了什么？w趵auto通常会将图像字节减少42%！wu auto确保最终用户接收的图像资源的大小适合图像的布局大小。通常，这意味着缩小图像的比例，这样可以减少图像字节，从而获得更快的体验。例如，如果您的缩略图只占屏幕的三分之一，则可以使用以下HTML。注意

属性。复制到剪贴板没有客户端提示的用户（例如，使用Firefox或Safari的用户）无法获得调整大小的图像。为了适应它们，大多数开发人员设置了一个后备大小，比如w_自动：100：500。与其他浏览器相比，Chrome浏览器的平均下载量减少了42个字节。当然，不同的图像可以看到不同的节省。默认情况下，有些图像较小；有些图像较大。以上是最终用户体验的累积分布函数（CDF）。y轴上是用户请求的百分位数（一个流行的图像比一个不受欢迎的图像计数更多次）。在x轴上是保存的字节百分比，以及与非客户端提示相比，客户端提示用户保存的每个图像的字节数用户。作为您可以看到，通过客户端提示，您可以显著减少每个图像的字节大小。响应图像对性能至关重要！60%的用户拥有高DPR屏幕随着iphone4上的Retina显示屏的推出，移动和桌面制造商已经增加了物理像素密度，以获得高质量的体验。为了防止网页在这些设备上显得很小，呈现给web开发人员的逻辑CSS像素的数量保持不变（通常是320个CSS像素）。但是，您可以将这些CSS像素乘以设备像素比率（DPR）来获得实际的物理像素数。目前，大约60%的用户具有高DPR显示。具有讽刺意味的是，大部分移动设备都有这些出色的显示：95%的安卓设备，而65%的台式机。网络上的大多数内容都是为DPR:1设计的，因此，必须"上采样"来填充显示器上的额外像素。结果是一个不合格的体验，这可能并不重要的图标和标志。但是，对于英雄图像、营销活动、产品图像、艺术等等，您需要通过匹配设备的DPR来增强体验。当然，您不希望不必要地将DPR:3映像发送到1x设备，因为这会导致不必要的字节。通过添加dpr_auto参数，您可以根据设备：复制到剪贴板客户端提示的隐私问题是什么？在一次例行审查中，谷歌的隐私小组提出了一个担忧，即客户机提示可能被用于对用户进行指纹识别。具体地说，可以在没有cookies的网站之间识别一个人，但要将其屏幕大小与视窗宽度和DPR属性相关联。这是可能的，因为客户端提示，一旦启用，比如，网站，不仅发送到网站域，也可以是子域和第三方，如images.example.com以及邪恶僵尸网. 如果多个不相关的网页启用客户端提示并从邪恶僵尸网, 邪恶僵尸网或许可以在他们邪恶的探索中使用这些提示来唯一地识别一些用户，"指纹"并在他们穿越时跟踪他们网络。给定像素2的视区大小对于每个设备都是相同的，您可能想知道如何使用客户端提示来唯一地标识个人。另外，像viewwidth:320、DPR:2和Width:500这样的请求细节如何用于指纹识别？好问题。客户提示不会泄露个人信息。尽管如此，在某些情况下（尤其是在桌面上，视窗宽度变化很大）这些值可以与其他详细信息（如IP地址）相结合，使您比以前更加独特。例如，如果没有将浏览器窗口设置为全屏，则可能与大多数其他用户的"视口宽度"值略有不同。通过将浏览器宽度与星巴克WiFi IP地址相结合，邪恶僵尸网可以被动地在多个不相关的网页上识别和指纹。我们原则上理解这一关切，但想看看实际情况如何。因此，我们查看了接收到的视窗宽度的现有值，发现99%的用户属于40个标准视窗宽度。但是，视窗宽度的长尾很长，有数千个不同的值。（请注意，2.6%的"其他"Android价值观可能是"桌面"Chromebook。）我们现在在哪里？发生了什么变化？出于足够的谨慎，Chrome团队决定采取行动并禁用所有跨域的客户端提示。所以即使网站已启用客户端提示，桌面Chrome当前未将其发送到images.example.com或者res.cloudinary.com网站。幸运的是，我们能够分享客户在客户端提示中看到的好处，并说明移动设备的提示仍应发送。我们的客户端提示功能的显著好处主要是针对移动用户，而隐私问题主要是针对桌面用户。Chrome团队同意了这一点，并决定暂时保持移动/安卓Chrome不变），目前得到谷歌和W3C支持的计划是通过功能策略API向开发者提供精细的隐私控制。当Chrome中实现了这一点后，桌面客户端的跨源提示将被重新启用，Cloudinary的功能将再次适用于所有人。一个其他变化：规范现在要求浏览器发送客户端提示的TLS。幸运的是，80%的用户已经从TLS中受益。如果你属于20%的类别，是什么阻碍了你采用TLS？我现在该怎么办？尽管出现了暂时的服务中断，但您（Cloudinary客户）仍然可以意识到客户机提示的价值。下面是一个快速行动计划：转到TLS。将所有指向Cloudinary的链接更改为https://res.cloudinary.com。至少，启用（或继续使用！）自动和自动。它们仍然适用于移动Chrome用户，这些用户通常从这些功能中受益最多。对于占用明显小于整个视口宽度的图像，请确保添加

。在我们等待功能策略的时候，可以考虑使用Cloudinary的JavaScript SDK（它可以使w_auto和dpr_auto url重新工作（以性能为代价），或者实现基于标记的响应图像解决方案（以复杂度为代价）。如果总字节数对用户来说比速度更重要，我们的JavaScript SDK可以是一个很好的权宜之计，只需要很少的标记更改。但是，尽管客户端提示（和srcset）与浏览器的预加载程序一起工作，我们的JavaScript SDK必须绕过它，故意延迟图像加载，直到它知道每个图像的布局大小。因此，尽管Javascript可以节省数千字节，但使用Javascript处理响应图像需要几秒钟的时间。考虑您/您的用户需求小心。结论我们喜欢客户端提示，因为它们可以产生清晰、高质量的用户体验，同时还能节省字节！Chrome最近的变化是一个小小的挫折，但却是为了平衡用户隐私而采取的预防性妥协（我们从剑桥分析公司（Cambridge Analytica）等公司那里学到了教训）。Cloudinary在W3C标准工作组中非常活跃