(关于)imgix 页面重量

Imgix 一直是 CSS-Tricks 上的长期展示广告赞助商。 这篇文章**并非**技术赞助，我只是注意到他们发布了一个用于分析任何给定 URL 上图像性能的工具，这很有趣。

我们知道网页性能至关重要。 我们知道图像可能是导致网络上页面重量膨胀的最大罪魁祸首。 我们知道我们有工具可以查看整个页面的性能。对我来说，拥有专门用于分析和演示我们如何在图像方面做得更好的工具似乎是比较新的。这就是这个页面重量工具的作用。

显然，这是一个针对他们的营销工具。 您输入一个 URL，它会告诉您如何才能做得更好，以及 imgix 如何具体帮助您做到这一点。我通常喜欢这种方式。拥有企业支持的工具拥有资源和动力来坚持下去并变得更好。但一如既往，需要注意这一点。

我向 Brit Morgan 提了一些问题。

如我们所见，在查看页面重量的主页时，您输入一个 URL，它会分析所有图像并提供一些关于它们原本可以有多大性能提升的信息。幕后发生了什么？

我们将页面上的每个图像都通过 imgix 处理，尽可能地调整大小以适应图像容器，并转换文件格式、调色板和质量断点，以确定哪种组合可以提供最佳的大小节省。然后我们显示每个图像的该版本。

我看到它建议将图像调整到容器大小，但这只对 1x 显示器有意义，对吧？为了在高密度显示屏上获得视觉清晰度，图像需要大于其显示像素大小。

当然。页面重量工具目前没有解决高 DPR 显示差异，但我们的服务可以。我们通过 客户端提示 提供自动化的高 DPR 支持，并通过我们的 dpr 参数手动提供支持，这允许开发人员直接设置所需的值（单独使用或作为浏览器中尚不支持该功能的客户端提示支持的回退）。我们的 imgix.js 前端库还会生成一个全面的 srcset（基于定义的大小）来解决设备所需的任何大小/DPR。

我认为这里的大多数开发人员都足够聪明，能够意识到这确实是 imgix 的一种聪明的营销方式。但也足够聪明，能够意识到图像在网页性能中起着至关重要的作用，并且希望做得更好。imgix 能做到开发人员自己做不到的事情吗？或者对于开发人员来说，自己做这些事情是否相当不切实际？

首先，需要注意的是，调整大小并不是 imgix 做的唯一事情，尽管它是一个非常常见的用例。我们提供了 100 多个不同的处理参数，使开发人员能够完成从上下文感知裁剪到颜色空间处理到图像合成的一切操作。因此，采用 imgix 可以让开发人员轻松获得许多图像处理灵活性，即使他们主要使用它来支持响应式设计。

也就是说，获得一个非常简单的调整大小解决方案并不困难，许多开发人员都是从那里开始的。通常，这采用某种基于 ImageMagick 或 Pillow 或其他图像处理库的批处理脚本的形式，该脚本为不同的断点创建派生图像。

有一段时间，这通常就足够了。但是，一旦您的图像库超过几百张图像，基于批处理的系统就会以各种方式开始崩溃。可见性、错误处理、图像目录清理以及添加对新格式和设备的支持，这些都是随着规模扩大而变得更加困难的事情。非常大的网站以及内容不断变化的网站通常最终会花费大量的开发时间来执行此类维护任务。

因此，实际上，“你能构建这个吗？”这个问题不如“你应该构建这个吗？”这个问题有用。换句话说，图像处理是否对您正在构建的内容的价值主张至关重要，以至于您愿意花费时间和精力维护自己的系统来处理它？通常，答案是否定的。大多数开发人员宁愿专注于重要的事情，并将图像留给像 imgix 这样的东西——一个强大、可扩展且正常工作的系统。

该工具是否查看 HTML 中的响应式图像语法？例如，根据 srcset/sizes 或 picture 元素规则实际下载了哪个图像？

还没有。这是我们希望在该工具的下一个版本中实现的功能。

您能否分享一些特别令人印象深刻或有创意的 imgix 实现案例？

我们越来越多地看到一个有趣的用例是社交媒体的图像处理。如今，许多网站的大部分流量都来自社交媒体，这使得让内容在信息流中看起来更好看比以往任何时候都更加重要。设置 OpenGraph 标签是一个开始，但每个社交网络都有不同的容器大小。这产生了与移动碎片化带来的问题类似的问题，我们可以通过为每个网络动态生成社交图像来提供帮助。这提供了一个完善的展示，而不会为维护网站的人员增加大量开销。

其他客户正在更进一步，通过组合多张图像为社交媒体创建自定义展示。HomeChef 是一家送餐服务公司，它使用这种方法从其食材照片 动态创建完善的品牌化 Pinterest 图像。

我们实际上创建了一个名为 Motif 的开源工具（GitHub 代码库），以便开发人员更容易开始使用 imgix 动态生成社交图像。