其他人则选择了固定数量的步骤并将其用于每个范围：
有些人选择了常见的显示宽度：
当时，由于我很懒惰并且不喜欢管理许多资源，所以我建议增加一倍：
所有这些策略本质上都是任意的。杰森认为必须有更好的方法。最终他意识到我们根本不应该在像素方面考虑这些步骤。我们应该以“文件大小的合理跳跃”为目标；这些步骤应以字节为单位定义。
例如，假设我们有以下两个JPEG：
我们不想将1200像素宽的资源发送给只需要较小像素的人的最大原因不是多余的像素；这是多余的296 KB无用数据。但是不同的图像压缩方式不同。尽管像像素这样的复杂照片随着像素大小的每增加而急剧增加，但是简单的徽标可能根本不会增加太多的重量。例如，此1000像素宽的PNG仅比200像素宽的PNG大8 KB 。
遗憾的是，还没有任何易于使用的工具来生成目标字节大小的图像。而且，理想情况下，您需要一种可以为您生成整个响应图像资源的东西，而不是一次仅生成一个。Cloudinary已构建了该工具！
下一个边界？自动艺术指导！
因此，我们为断点问题建立了解决方案，并在此过程中建立了一个工具，该工具使生成适合分辨率的图像变得容易。上载高分辨率的原件，并<img>以合理的断点和资源进行全面响应以进行备份。
基本的工作流程（上传图片，获取响应图片）很吸引人。我们一直专注于断点问题，但是当我们发布解决方案时，人们很快就问：“它还能做什么？”
还记得我说过大多数时间大多数开发人员都需要基于分辨率的适应吗？有时，这还不够。有时，我们想沿正交轴调整图像：艺术方向。
每当我们可视地更改图像以适应不同的环境时，我们就是在“艺术指导”。适应分辨率的图像到处看起来都是相同的-只是调整大小。以艺术为导向的图像以视觉上可见的方式变化。在大多数情况下，这意味着裁切，以适应新的布局或以小尺寸查看图像时最重要的部分保持可见。
您需要的是一种可以某种方式“看见”猫并智能地将其植入的算法。
我们花了几个月的时间，但我们也构建了它，并将其打包为所有Cloudinary用户可用的功能。
它是这样工作的：当您指定要使用“自动重力”（g_auto）裁切图像时，图像将通过一系列测试运行，包括边缘检测，面部检测和视觉唯一性。这些不同的标准然后全部用于生成图像“最重要”部分的热图。
整齐！
显而易见，我们可以并且应该使用g_auto的智能功能来为Generator添加自动美术指导。在对标记逻辑进行了几次升级和一些（令人吃惊的是）UX决策之后，我们做到了：该工具的第2版（现已具有美术指导）已投入使用。
让我们去游览
您如何使用响应式图像断点生成器？
工作流程已从第一个版本开始大量延续：上传图像（或选择一个预设），并设置最大和最小分辨率，步长（以字节为单位！）和最大资源数（或者，您可以简单地使用我们最及时的默认设置）。点击“生成”，瞧！您将直观地看到结果图像的响应断点，一些示例标记以及一个大的“下载图像”按钮。
如果您想一次处理多个图像怎么办？如果您要用数百或数千（或数十万！）图像来构建整个网站，尤其是当您使用用户生成的内容时，您将不仅需要简单的按钮操作；您将需要完全自动化。为此，有Cloudinary的API，您可以使用该API调用直接为Generator供电的智能裁剪和响应图像断点功能。使用API，您可以为任何形状或大小的项目创建自定义，优化和全自动的响应式图像工作流程。
例如，下面的Ruby代码会将图像上传到Cloudinary，将其智能裁剪为16：9的宽高比，并生成一组具有合理的响应图像断点的缩减资源：
最后的想法
但是回到发电机。现在，它不仅可以“选择”图像断点，而且还可以选择艺术指导的作物。它将为您生成所有乏味的资源和标记；上传一张高分辨率的原始图片，并获取所有需要的标记和缩减资源，以便在网页上包含可缩放且以艺术为导向的图像。
我是否提到过响应式图像断点生成器是免费的？和开源？旋转一下，请向我们发送反馈。谁知道呢，也许我们很快就会再使用版本3！
