江门做网站：使用响应式图像断点生成器自动化艺术方向

2019.08.13 mf_web

181

自今年早些时候发布以来，响应式图像断点生成器已经将高分辨率原件转换为<img>具有敏感性srcset的响应式按钮。今天，我们推出了第2版，它允许您将布局断点与纵横比配对，并生成艺术指导的<picture>标记，并使用智能裁剪的图像资源进行匹配。

响应式图像断点：问及回答

为什么我们首先构建这个工具？

响应式图像向不同的人发送不同的资源，每个资源都根据其特定背景进响应图像是适应的图像。这种适应可以沿着许多不同的轴发生。大多数时候，大多数开发人员只需要自适应分辨率 - 我们希望将高分辨率图像发送到大视口和/或高密度显示器，并将低分辨率图像发送给其他所有人。Jason关于响应式图像断点的问题涉及这种适应性。

当我们制作适应各种分辨率的图像时，我们需要生成一系列不同大小的资源。我们需要选择最大分辨率，最小分辨率和（这里是棘手的位）两者之间的一些大小。可以根据页面的布局和对设备的一些合理假设来计算最大值和最小值。但是当开发人员开始实现响应式图像时，如何确定中间件的大小并不清楚。有些人在图像宽度之间选择固定步长：

显示使用固定步长策略的一组srcset资源的相对尺寸的矩形，宽度如下：300,400,500,600,700,800,900,1000,1100和1200 — 显示srcset使用固定步长策略的一组资源的相对尺寸的矩形。

其他人选择了固定数量的步骤并将其用于每个范围：

矩形显示使用固定步数策略的三组srcset资源的相对尺寸。第一组有这些宽度：300,600,900,1200。第二组：300,467,633,800。第三组：300,867,1433,2000 — 矩形显示srcset使用固定步数策略的三组资源的相对尺寸。

有些人选择了常见的显示宽度：

矩形显示一组srcset资源的相对尺寸，缩放到常见的显示宽度：300,512,600,768,800,1024,1200 — 显示一组srcset资源的相对尺寸的矩形，其缩放到常见的显示宽度。

当时，因为我很懒，不喜欢管理很多资源，所以我赞成加倍：

显示使用双倍策略缩放的一组srcset资源的相对尺寸的矩形，宽度为：300,600,1200 — 显示srcset使用倍增策略缩放的一组资源的相对尺寸的矩形。

所有这些策略基本上都是任意的。杰森认为必须有更好的方法。最后他意识到我们不应该根据像素来考虑这些步骤。我们的目标应该是“文件大小的合理跳跃”; 这些步骤应按字节定义。

例如，假设我们有以下两个JPEG：

我们不想将1200像素宽的资源发送给只需要小像素的人的最大原因不是额外的像素; 这是额外的296 KB无用数据。但不同的图像压缩不同; 虽然像这样的复杂照片可能会随着像素大小的增加而以字节大小急剧增加，但简单的徽标可能根本不会增加太多的重量。例如，这个1000像素宽的PNG仅比200像素宽的版本大8 KB 。

遗憾的是，没有任何易于使用的工具来生成目标字节大小的图像。而且，理想情况下，您需要能够为您生成全系列响应式图像资源的东西 - 而不仅仅是一次。Cloudinary已经建立了这个工具！

它已将其作为免费的开源 Web应用程序发布。

但人们想要更多。

下一个边疆？自动艺术指导！

因此，我们构建了一个解决断点问题的解决方案，并在此过程中构建了一个工具，可以轻松生成适应分辨率的图像。上传高分辨率原始文件，并<img>通过合理的断点和备份资源获得完全响应。

基本工作流程 - 上传图像，获取响应图像 - 很有吸引力。我们一直专注于断点问题，但是当我们发布解决方案时，人们很快就会问：“它还能做什么？”

还记得当我说基于分辨率的调整是大多数开发人员需要的，大部分时间都是这样吗？有时，这还不够。有时，我们希望沿着正交轴调整我们的图像：艺术方向。

任何时候我们在视觉上改变我们的图像以适应不同的背景，我们就是“艺术指导。”一个适应分辨率的图像在任何地方看起来都是相同的 - 它只会调整大小。艺术导向的图像以视觉上明显的方式改变。大多数情况下，这意味着裁剪，要么适合新的布局，要么在以小的物理尺寸观看时保持图像的最重要部分可见。

人们问我们自动艺术方向 - 这是一个难题！它需要知道图像的“最重要”部分是什么。比特和字节很容易编程; 计算机视觉和“重要性”的模糊概念完全不同。

例如，给定此图像：

一个愚蠢的算法可能只是在中心裁剪：

你需要的是一种算法，可以某种方式“看到”猫并智能地在其上作物。

我们花了几个月的时间，但我们也构建了它，并将其打包为所有Cloudinary用户可用的功能。

以下是它的工作原理：当您指定要使用“自动重力”（g_auto）裁剪图像时，图像将通过一系列测试运行，包括边缘检测，面部检测和视觉唯一性。然后，这些不同的标准全部用于生成图像的“最重要”部分的热图。

然后将具有新比例的框架滚动到图像上，对可能的作物进行评分，并选择获胜者。

结果？我们的猫，前面和中心：

整齐！

很明显，我们可以而且应该使用g_auto智能为发电机添加自动艺术指导。在对标记逻辑和一些（令人惊讶的棘手的）UX决策进行了一些升级之后，我们做到了：该工具的第2版 - 现在具有艺术指导 - 是实时的。

我们来一趟吧

你如何使用响应式图像断点生成器？

工作流程主要从第一个版本继承：上传图像（或选择其中一个预设），并设置最大和最小分辨率，步长（以字节为单位！）和最大资源数（或者，你可以简单地使用我们非常好的大多数时间默认值。点击“生成”，等等！您将获得结果图像的响应断点，一些示例标记和一个大的“下载图像”按钮的可视化表示。

新版本有一组新的输入，可以实现艺术指导。它们默认是关闭的。让我们把它们转过来再生，好吗？

艺术方向输入的屏幕截图，选择了“桌面”和“智能手机” — 艺术方向输入的屏幕截图，选择“桌面”和“智能手机”（查看大图）

第一个输出部分保持不变：它包含我们的“桌面”（即完整）图像，响应式断点到完美。但在它下面是一个新的部分，它展示了我们新的，巧妙裁剪的图像：

在此之下，我们现在拥有了艺术导向<picture>元素所需的所有标记，这些元素在布局断点处在两个作物之间切换。

最后，有一个<picture>实例可以向您展示所有标记实际上做了什么。

让我们回过头来看一下艺术方向输入的更多细节。

每个大框都映射到设备类型，并为每个设备类型分配了一个布局断点。设备类型名称下的文本显示特定的媒体查询，如果为true，将触发此裁剪。

在此之下，我们可以指定要在此设备类型上裁剪的宽高比。

在此之下，我们指定图像相对于此类设备上视口宽度的显示宽度。它会占用整个视口（100％）还是更少？该工具使用此百分比生成简单sizes标记 - 指定图像在布局中的大小。如果您在生产中使用此代码，则可能需要返回示例标记并定制这些sizes值以更精确地匹配您的特定布局。但是根据您的布局，在这里输入粗略估计可能已经足够了。

你有它：简单的按钮艺术方向。

自动化

如果您想一次处理多个图像怎么办？如果您正在构建包含数百或数千（或数十万！）图像的整个网站 - 特别是如果您正在处理用户生成的内容 - 那么您需要的不仅仅是按钮式按钮; 你需要完全自动化。为此，可以使用Cloudinary的API，您可以使用它直接调用为Generator提供动力的智能裁剪和响应式图像断点功能。通过API，您可以为任何形状或大小的项目创建自定义，优化和完全自动化的响应式图像工作流程。

例如，这里的Ruby代码将图像上传到Cloudinary，智能裁剪为16：9宽高比，并使用合理的响应图像断点生成一组缩小的资源：

Cloudinary::Uploader.upload("sample.jpg",
    responsive_breakpoints: { 
        create_derived: true,
        bytes_step: 20000,
        min_width: 200,
        max_width: 1000,
        transformation: {
            crop: :fill,
            aspect_ratio: "16:9",
            gravity: :auto
        }
    })

如果您只在前端工作，所有这些功能也可通过URL参数获得！下面是搭载了URL 客户提示和智能裁剪，做同样的事情下载的Ruby代码上面确实上传 - 并且它提供了不同的，动态优化资源，不同的设备，响应：

https://demo-res.cloudinary.com/sample.jpg/c_fill,ar_16:9,g_auto,q_auto/w_auto:breakpoints/sample.jpg

这个小网址中包含了大量的智能！

最后的想法

但回到发电机。现在，它可以做的不仅仅是“只是”选择你的图像断点 - 它也可以选择你的艺术指导作物。它将为您生成所有繁琐的资源和标记; 上传一个高分辨率的原始，并取回所有的标记和缩减资源，你需要包括一个可扩展的和您的网页上的艺术指导图像。

江门做网站

江门做网站：使用响应式图像断点生成器自动化艺术方向

响应式图像断点：问及回答

下一个边疆？自动艺术指导！

我们来一趟吧

自动化

最后的想法

相关推荐