自动艺术指导的响应图像？ 干得好。

已发表: 2022-03-10
快速总结↬

在许多项目中，响应式图像不是技术问题，而是战略问题。 使用 srcset 和 size 将不同的图像传送到不同的屏幕在技术上是可行的element 和 Picturefill（或类似的）polyfill； 但是所有这些图像变体都必须创建、调整并融入现有 CMS 的逻辑中。 这并不容易。

在许多项目中，响应式图像不是技术问题，而是战略问题。 使用 srcset 和 sizes 以及 <picture> 元素和 Picturefill（或类似的）polyfill 将不同的图像传送到不同的屏幕在技术上是可能的； 但是所有这些图像变体都必须创建、调整并融入现有 CMS 的逻辑中。 这并不容易。

最重要的是，还必须生成响应式图像标记并将其添加到 HTML 中，如果在某个时候出现新的图像变体（例如 WebP 等文件格式或大型横向/纵向变体），标记具有要被更新。 所需的额外工作量通常会带来麻烦——因此，如果您有完美的产品拍摄，您需要手动创建移动、纵向和横向以及更大视图的变体，或者构建插件和扩展以以某种方式自动化该过程。

压缩图像技术
压缩图像技术：文件尺寸加倍，以最差的质量保存。

有时变通办法也很有效。 其中之一是压缩图像，这是一种巧妙的技术，它表明压缩水平比其物理尺寸产生的差异更大。 因此，用 Scott Jehl 的话说，“给定在网站上以相同大小显示的两张相同的图像，如果它既高度压缩又比显示的尺寸大得多，那么其中一张的文件大小可能会大大小于另一张。 ”

关于 SmashingMag 的进一步阅读：

  • 带有 CSS 背景图像的简单响应式图像
  • 使用 Mobify.js 自动化您的响应式图像
  • 如何在响应式网页设计中解决自适应图像问题
  • 带有艺术指导的WordPress中的响应式图像
跳跃后更多！ 继续往下看↓

所以基本上我们可以放大给定的图像，在 Photoshop 中以最差的质量保存它，然后让浏览器进行重新缩放——平均而言，通过网络发送的实际图像尺寸会更大，但尺寸会缩小大约 50-65%文件大小。 现在，这是一个很大的不同。 它适用于实际项目。

缺点：我们将工作卸载到客户端，如果用户选择保存图像，他们将得到一个非常次优的版本。 它也不能帮助我们处理艺术指导的图像。 这不是我们正在寻找的一个干净的解决方案。

魔鬼在……后端！

一个常见的场景是在 CMS 中集成某种后端逻辑，允许内容管理器上传图像，为每个给定图像定义焦点，并动态生成每个图像的所有这些裁剪变体。

使用 imgix 裁剪熵。
使用 imgix 进行自动兴趣点裁剪，使用crop=entropy参数进行智能自动裁剪。

“裁剪”位是一个棘手的问题，如果您在没有艺术指导的情况下调整图像大小并允许浏览器选择最适合的图像，这不会是一个大麻烦 - 你可以使用 ImageMagick 或任何其他图像编辑工具进行重新缩放，或者 CMS 插件可以为您处理它：例如 Mobify.js API、WordPress 核心中的响应式图像以及 Drupal 的解决方案。

但是，如果艺术指导确实很重要——例如，如果你想将非常具体的产品照片发送到不同类型的屏幕——你将不得不研究更高级的选项。 为狭窄的视口缩小的宽风景照片不会特别有用，放大的窄图像也不会在宽屏幕上填充整个视口。 这就是我们需要更好、更智能的解决方案的地方。

那么有哪些选择呢？

好吧，我们可以通过 Photoshop 中的内容感知填充来运行批处理，或者使用 Smartcrop.js 之类的工具，这是一个使用 JavaScript 实现内容感知图像裁剪的相当简单的实现。 我们甚至可以将 smartcrop-cli（连同 ImageOptim-CLI）集成到我们的 Grunt 和 Gulp 构建过程中，并动态裁剪图像。 您还可以将 imgix 与它的自动兴趣点裁剪一起使用。 这已经是一个很好的开始，但我们需要手动为所有这些变体编写标记。

Smartcrop.js
Smartcrop.js，一个使用 JavaScript 进行内容感知图像裁剪的相当简单的实现。

好消息：街区附近有一个新孩子。 就在几天前，我们写了关于响应式图像断点生成器的文章，这是一个小型开源工具，可让您以交互方式计算图像的断点。 基本上，您可以上传图像，该工具将检测适当的断点、重新缩放图像并生成响应式图像标记，然后您可以将其复制/粘贴到 HTML 中。 您可以更进一步，使用该工具的 API 自动制作直接响应式图像。

Smartcrop.js
Eric Portis 的艺术指导响应式图像演示，基于他关于自动生成的艺术指导图像的文章。

正如 Eric Portis 在他的文章中解释的那样，在使用 Cloudinary API 时，您可以指定一个crop_mode ，它允许您模仿 CSS 中background-size: cover 。 除了提供高度和宽度之外，您还可以使用gravity参数、缩放因子和供应纵横比来指定焦点，这可以使 URL 更易于阅读。 事实上，该 API 支持人脸检测，因此如果您的图像包含人脸，则艺术指导可以自动化，并有更高的可能性进行相当不错的裁剪。

如果您希望能够明确定义图像的焦点，您可能需要查看 Sizzlepig（不是免费的），这是一种可以与 Google Drive 和 Dropbox 集成的浏览器内图像批处理工具，并允许您更改裁剪并为每个图像缩放。

概括

理想情况下，我们希望有一种工具可以生成“足够智能”的裁剪并自动在构建中插入响应式图像标记，或者提供一个界面来直观地调整图像的焦点并输出“准备就绪”去”标记。 我们还没有完全到达那里，但我们可能很快就会到达。

与此同时，在处理一项相当艰巨的任务（手动或通过构建自定义 CMS 插件）生成艺术指导的图像变体时，上面列出的工具可能是足够好的选择。