现在，他们的屏幕分辨率和分辨率都在不断增加，这使得他们的屏幕分辨率和分辨率越来越高。一个网站的标记必须自我调整，以使其在所有不同的设备上看起来完美，在不同的分辨率、像素密度和移动设备方向上都是如此。对于web开发人员来说，管理、操作和交付图像是响应式设计的主要挑战之一面对面。实施响应式设计的断点意味着建立一个可以在不同维度显示相同图像的网站。一个图像用于所有屏幕分辨率和不同的设备是不够的。Cloudinary已经在帮助开发人员为网站创建响应图像，方法是上传一个图像并动态调整其大小以匹配不同的屏幕大小。但是很明显每像素的图像太多了-你怎么能自动选择最佳的响应图像大小呢？网络研讨会无论您使用的是基于Javascript的响应库、srcset image属性、HTML5元素、现代客户端提示或其他响应图像解决方案，它们仍然缺乏对决定选择哪些图像分辨率以及在响应式网站中包含多少不同图像版本的共同需求的响应。这些称为响应断点或响应映像断点。Cloudinary现在提供了一个解决方案，可以智能地为每个特定的图像找到最佳的响应图像尺寸。响应断点的生成可以使用基于云的API以编程方式完成，也可以使用一种新的免费开源web工具——响应断点（ResponsiveBreakpoints）进行交互发电机。同时Cloudinary是一个商业服务（有免费计划），响应断点生成器是完全免费的，开源的，托管在GitHub上。我们构建它是为了社区的利益——认识到响应断点对于几乎每个试图使其站点适应多个屏幕的开发人员来说都是一个痛点尺寸。图像-特定断点选择为图像找到最佳断点是一个挑战，为了避免错误地选择足够的图像或选择太多的图像，您需要了解不同图像的数量、视觉质量和所涉及的带宽之间的权衡。当一个小的维度缩减显著地减少了图像的文件大小时，您应该创建另一个缩小的图像版本。另一方面，如果按一定的比例缩小图像并不能显著节省足够的带宽，则可以向用户提供更大的图像，并让浏览器处理正在调整大小缩小图像的挑战由于不同图像的文件大小缩减不同而更加复杂。它不仅取决于图像的具体内容，还取决于图像对JPEG、PNG、WebP等图像格式压缩算法的可变敏感度。对于某些图像，较小的缩小可以节省大量的文件大小，而对于其他图像，即使是更显著的缩小也不会显著影响文件大小。因此，您需要定义文件大小步骤，在该步骤中创建另一个缩小的图像版本。cloudfour的jasongrigsby在他关于图像断点的文章中称之为文件大小步长性能预算。Cloudinary的分析证实，不同的映像需要不同数量的版本，以便根据您的性能平衡带宽减少的权衡预算。考虑一下以下2400x1600 JPEG图像：复制到clipb公司oardhttps://res.cloudinary.com/responsivebreakpoints/image/upload/woman_glasses.jpgasume你需要展示这个图片在你的响应网站上的宽度在200到1000像素之间，你定义的最小文件大小步骤（性能预算）大约是20KB。如下表所示，您只需创建并交付此映像的五个不同版本，以适应所有不同的设备和浏览器。.breakpoints_表{width:100%；}.breakpoints_table td，.breakpoints_table th{字体大小：13px；填充：7px 10px；边框：1px solid#ddd；行高：18px；}.breakpoints_table td a{font-weight:正常；}.breakpoints_table th{字体样式：斜体；颜色：#888；字体粗细：normal；}不。宽度高度文件大小图像12001336.9 KB查看图像247731827.2千字节查看图像三68145448.0 KB查看图像484756567.6 KB查看图像5100066786.9千字节查看图像现在我们再来一张JPEG照片：复制到clipb公司oardhttps://res.cloudinary.com/responsivebreakpoints/image/upload/castle.jpgTrying要使用200到1000像素宽的相同设置和大约20KB的最小文件大小步长来查找此图像的最佳断点，将导致此图像需要九个不同的版本，如下表所示。不。宽度高度文件大小图像12001338.7 KB查看图像238025327.8 KB查看图像三51434348.5 KB查看图像461941368.3千字节查看图像571147487.7千字节查看图像6804536108.5 KB查看图像7883589129.3 KB查看图像8957638148.2 KB查看图像91000667160.7 KB查看图像如上所示，一个映像所需的版本数几乎是另一个映像所需版本数的一半。对于其他类型的照片来说，这种差异可能更为显著。如果你用这个X2的差值乘以数百万用户上传的图片，结果是大大节省了存储、图像处理成本和图像管理复杂性，同时还能提供最漂亮的图像并保护用户经验。反应灵敏断点生成器-免费的web工具为了完美地平衡响应网站的图像版本数量，您需要根据您定义的文件大小步骤找到正确的断点。你怎么能那样做？您可以为所有可能的宽度值生成图像，并且只选择反映文件大小显著减小的图像。然而，这是低效的，而且可能昂贵。分析各种图像格式的压缩机制的行为（主要是JPEG，PNG和WebP）导致了算法的创建，以高效、智能地找到与尺寸和文件大小保存相匹配的图像断点要求。基于在这些算法上，我们创建了一个新的免费公共web工具，称为响应图像断点生成器。响应断点生成器使您能够交互式地上载图像并定义设置，以查找符合图形设计要求的匹配图像尺寸。正如您在下面的屏幕截图中看到的，您可以定义所需的图像宽度范围、文件大小步长（以千字节为单位）以及允许的最大图像数的截止值。此外，您可以要求结果包括DPR 2.0显示的双分辨率图像（例如，Retina Display）。当您上载图像时，断点将根据您的设置生成，并在云中自动计算。然后，生成的断点将显示在摘要表中，并在上载的图像上直观地显示出来。您还可以下载一个zip文件，其中包含与生成的断点生成器工具还创建了一个HTML5图像标记，您可以将其复制粘贴到代码中。img标记的srcset属性设置为根据智能选择的断点列出图像版本和宽度值。处理img标记的现代浏览器将知道如何根据响应web中图像的可用空间选择正确的图像版本布局。复制到剪贴板

此外，响应式布局还涉及艺术指导。例如，对于移动设备，可能需要裁剪原始图像以匹配图形设计所需的不同纵横比。断点生成器工具使您能够选择多个纵横比，并且将分别为每个纵横比生成断点，同时裁剪原始图像以匹配所需的纵横比。可下载的zip文件还将包含所有方面的所有图像比率。英寸此外，生成器工具显示了一个HTML5"picture"元素代码示例，该示例将不同的纵横比及其断点组合到一个响应简单的HTML解决方案中。下面是一个"picture"标签的示例，Chrome和Firefox等现代浏览器已经支持，而微软的Edge和苹果的Safari最近刚刚在新的官方或beta版本中增加了支持。如果您还想支持旧的浏览器，可以使用Picturefill polyfill Javascript图书馆。收到到剪贴板