使用图片管理服务的流程考虑

有很多网站想要帮助你处理图片。 它们可以优化你的图片，并帮助你高效地提供服务。

以下是我指的这类服务。

• Cloudinary
• ImageEngine
• imgix
• Akami Image Manager
• KeyCDN Image Processing
• CloudImage
• ImageOptim API
• Sirv
• Netlify Image Transformation

这是一件非常好的事情。 从任何角度来看，图片都是网站资源的重要组成部分，而我们处理图片优化和降低图片性能损耗方面做得并不好。 我现在正在参加一个会议，Dave 刚刚打赌，他可以找到现场观众网站上的未优化图片，并给他们每个人 100 美元。 我并不想接受他的赌注。

所以你使用了一些服务来帮助你更好地交付图片。 聪明。 其中许多服务将使图片管理和优化变得更容易。 但我认为它们并不是理所当然的。 有很多需要考虑的事情，比如做出不会让你陷入困境的选择。

我应该能够从我自己的 CMS 上传图片。

我不想去你的网站上传我的资源。 我想使用我自己的 CMS 中的媒体管理功能。 因此，该服务至少应该提供一个 API，甚至可能提供官方维护的 CMS 插件。

此网站使用 WordPress。 我可以非常轻松地将图片拖放到媒体库和帖子中。 我可以搜索我之前上传的图片。 我喜欢这样，并且希望今天以及未来都能利用它。

图片应该上传到我自己的服务器。

如果它也必须上传到图片服务，那也很好。 但它应该先上传到我的服务器，然后再上传到服务。 这样，我仍然可以保留源文件的拥有权。

内容中的图片应该使用我 CMS 中的功能性语义标记。

我更希望内容中的图片以完全功能性的 HTML 存储在我的数据库中。

<img src="/images/flower.jpg" alt="a blue flower">

它可以比这更复杂，例如使用srcset（但可能不使用sizes，因为这会随着设计的变化而变化），或者包含在<picture>或<figure>元素中……任何你认为有意义的语义 HTML。 最重要的是，我数据库中的内容具有完全功能的 HTML，并且图片的src指向我真实服务器上的真实图片。

图片服务的实现将涉及过滤该 HTML 以执行它需要执行的任何操作，例如替换 URL 以生成更复杂的响应式图片标记等。

通过拥有功能性 HTML 和服务器上的图片，这使我能够在需要时关闭图片服务。 服务有来有往的习惯，或者以使它们或多或少令人满意的方式发生变化。 我不想被锁定； 我想要自由。 我希望能够关闭服务并拥有一个具有完全功能图片的完全功能的网站，并且不会被阻止迁移到不同的服务——或者根本不使用任何服务。

即使我过去没有使用过该服务，我也希望所有图片都能从中受益。

我刚才提到了过滤数据库中图片的 HTML。 这应该适用于我网站上的所有图片，即使它们是在我开始使用图片服务之前上传和使用的。

这可能意味着该服务提供了一个基于 URL 的“获取”API，可以根据需要优化从其规范位置提取的图片。

我不应该考虑格式或大小。

我希望上传我拥有的任何内容。 可能是我刚刚截取的一些巨大的未优化屏幕截图。 如果我考虑一下，我想要上传一些过大且质量过高的内容，这样我就知道我有一个很棒的原始版本可用。 该服务将根据需要创建优化、调整大小和格式化的图片。

我还想上传 SVG 并保持 SVG 格式（这也已优化）。

图片最终将通过 CDN 提供服务。

CDN 对于速度至关重要。 澳大利亚用户从托管在澳大利亚的服务器获取图片。 加拿大用户从托管在加拿大的服务器获取图片。 这些服务器被配置为快速且无 Cookie，以及所有使资产 CDN 速度飞快的复杂技术。

图片应该以正确的格式提供服务。

如果你以 WebP 格式向支持它的浏览器提供图片，那么与使用响应式图片语法提供调整大小的图片相比，你可能会获得相同或更多的性能优化。 这非常重要。

我希望服务能够知道任何特定图片对于任何特定浏览器的最佳格式，并以该格式提供图片。 这会随着时间的推移而改变，因此我希望服务能够始终保持领先地位，这样我就不必操心了。

我知道三年前涉及 JPEG-XR 和 JPEG-2000 等格式 。 现在情况是否仍然如此？ 我不知道。 这是该服务的核心价值主张。

它应该优化图片并处理质量。

这可能是最明显的特性，也是你一开始使用图片服务的原因。 图片需要优化。 可能有几十种图片优化工具/算法旨在从图片中提取每一个字节。 图片服务可能使用这些算法，甚至拥有自己的高级技术。 理想情况下，默认情况下是尽可能地优化图片，而不会明显降低质量，但仍然允许我根据需要进一步降低质量。

不要因为我使用高像素密度图片而指责我。

许多图片服务都提供某种测试工具，你可以输入一个 URL，它会告诉你图片方面做得有多糟糕。其中许多工具会测试渲染页面上图片的大小，并将结果与原始图片的尺寸进行比较。如果原始图片更大，它们会告诉你如果缩小图片尺寸就可以节省空间。我觉得这很烦人。高像素密度显示器已经存在很长时间了，为它们提供服务不是什么罪过。

它应该帮助我为设备提供合适的尺寸，并在需要时提供完美的响应式语法。

并非所有图片都受益于相同的响应式断点。查看网站 Responsive Image Breakpoints。它会生成根据图片本身最佳的图片版本。这正是我希望从图片服务中获得的帮助。将难题自动化。

我知道我可能需要自己添加 sizes 属性，因为这非常依赖于我自己的 CSS 和网站的设计布局。 它仍然很重要，并且让我想知道图片服务是否可以更进一步，帮助我确定特定图片的最佳 sizes 属性。例如，在不同尺寸下加载我的网站，查看图片在 CSS 下渲染的大小，并根据此计算出稍后要使用的属性。

仅仅是我个人。

这仅仅是我自己的需求列表。我觉得它相当能反映“普通”网站的需求，这些网站有很多图片，并希望以正确的方式提供它们。

我没有深入探讨图片服务提供的所有花哨功能，比如能够告诉你图片包含一只向西的的长颈鹿，并且从星期四起就没有进食，同时还提供重新着色其视网膜的功能。我知道这些东西对某些公司至关重要。这更多的是关于在我看来最广泛和最常见的用例，即以当前技术允许的最佳方式托管和交付图片。