当我们看到 Chris 发布了 云托管数据存储列表 时，我们忍不住告诉他，我们也有一个，只不过我们的是一个功能齐全的 CMS，它带有一个丰富的查询语言和一个开源的、实时的、协作的创作工具，您可以使用 React 根据您的特定需求对其进行定制。它被称为 Sanity.io。
“把我们也添加到你的列表里！”我们请求 Chris。“不，你的东西很有趣，难道你不能写写你自己吗？”他回答说。“也许写一些对处理图片的人有用的东西。”挑战接受！
像 Sanity 这样的系统希望将您的内容从它所处的特定页面中解放出来，以便您可以通过 API 将其传递。这样，您就可以在任何需要的地方重复使用您精心制作的内容。
那么，这对图片意味着什么呢？
图片是异类。我们可以将文档文章、价格计划或项目组合捕获为潜在的复杂但最终可理解的数据结构，机器可以以多种有用的方式查询和处理这些数据结构。但是图片呢？它们其实只是位于 CDN 末尾的一堆像素，不是吗？
无论如何，我们还是想出了一些想法，因为每个人都需要图片，而且图片也应该像您的其他结构化内容一样，乐于前往新的和令人兴奋的地方和服务。
所以，我们现在就用 Sanity 来提供一个中等大小的图片技巧包。
1. 从图片元数据中获取调色板
有没有试过在用户提交的随机图片上叠加文字？效果如何？我们通常最终会对图片进行过滤，直到它们变得可预测，然后带着郁闷的表情回家。
我们认为，随图片一起提供一个图片调色板会很好，这样您就可以在深色和浅色排版之间进行选择，以及将视觉元素与图片颜色配对。这使得可读性大大提高，并防止了图片和文字颜色之间的冲突。
查看 CodePen 上 Knut Melvær (@kmelve) 编写的 在 Sanity 中将图片颜色作为元数据访问。
2. 获取低质量图片占位符
无论您的 CDN 多快多近，传输大型图片文件仍然需要时间。因此，我们为您的图片元数据包含了一个低质量图片占位符 (LQIP)。它是您照片在 20px 宽度下的 base64 编码字符串。在第一个请求中获取 LQIP 使您能够将代理图片直接烘焙到 HTML 中。
<figure
style={{
backgroundImage: `url(${mainImage.metadata.lqip})`,
paddingTop: `calc(100% / ${mainImage.metadata.dimensions.aspectRatio})`
}}
>
<img src={`${mainImage.url}`} />
</figure>图片占位符的一个挑战是能够在流体布局中预测图片的尺寸。在此示例中，我们使用了也包含在元数据对象中的纵横比 来计算 padding-top 技巧。这意味着您不必自己计算纵横比，例如 将其作为自定义属性与 CSS 变量结合输出。
查看 CodePen 上 Knut Melvær (@kmelve) 编写的 开箱即用获取低质量图片占位符。
3. 使用按需图片转换
您应该能够存储档案原始文件，并以您需要的任何分辨率和格式获取图片。继续，上传您的 268 兆像素 TIFF 文件，并请求一个 128×128 裁剪的 JPEG 图片，并带有 50% 的模糊效果。
转换是从 URL 参数生成的，并在第一个请求时生成。我们将结果缓存在本地和 CDN 上，因此对相同结果图片的许多请求都将非常快速。
以 这幅船底座星云的图片 为例。我们上传了 29.566 x 12.960 版本的图片。假设我们想要一个宽度为 500px 的 PNG 版本。将 ?w=500&fm=png 附加到图片 URL，它就出现了。
在太空中不仅难以听到尖叫声，而且难以判断方向。但假设您需要旋转图片。那么，您可以附加 &or=90，它就会倾斜 90 度（并缩小到 128px）。
并非要贬低 NASA 的任何成就，但如果您想在您的新型 15 亿美元望远镜上模拟 球面像差，您可以通过将 ?blur=30 添加到图片 URL 来实现！
图片管道也适用于您的 SVG 文件。假设您需要向 Facebook 提供一个 JPG Open Graph (og:image)，或者您迫切需要将这辆叉车的 SVG 作为 Slack 表情符号添加。
通过附加 URL 参数 w=128&h=128&fm=png 获取您需要的 128×128 PNG 版本， 就像这样。
您还可以控制背景颜色，使用 bg=<hexcolor>。假设我们出于某种原因想要这辆叉车 放在一个可爱的紫色背景上。
最后，如果您想链接到此图片并触发用户的下载，您可以附加 dl=<suggested file-name> 以使其生效。
使用 URL 参数进行操作并不总是像这样有趣，因此我们创建了一个 JavaScript 库，使它更容易一些。使用 npm install --save @sanity/image-url 进行安装，并 了解如何使用它（我们在本文的演示中使用了它）。
4. 围绕焦点裁剪和缩放以适应
那些令人讨厌的具有固定纵横比的图片。除了不知道输出设备的像素密度之外，您通常甚至不知道哪种裁剪最适合布局。即使在一个网站上，您也经常会在不同的布局中使用相同的图片，并且经常需要将其提供给第三方（如 Facebook），而第三方则期望特定的纵横比。
为了减轻处理此问题的痛苦，我们让内容编辑器可以为图片设置热点和裁剪。我们还创建了一个 JavaScript 包，它会完成所有创建正确图片转换 URL 的繁重工作。只需传递图片资源和您想要的尺寸，我们就会确定裁剪和缩放。
查看 CodePen 上 Knut Melvær (@kmelve) 编写的 自定义裁剪和热点。
5. 创建实时照片地图
如果这还没有达到顶峰，至少也达到了 10.5。
我们可以从图片中提取 EXIF 和地理位置数据。EXIF 数据包含拍摄照片时相机状态的信息（例如，曝光、光圈、镜头、闪光灯是否打开等）。出于隐私考虑（我们非常重视 GDPR 合规性），我们默认情况下已关闭此功能，但如果您在 架构选项中设置 [options: { metadata: ['exif', 'location' ] }，它们将被包含在内。
我们做了一个小演示，可以让您上传图片，如果它包含位置数据（例如，通常是您用手机拍摄的图片），它会自动在地图上弹出——因为 API 是具有监听器的实时 API！
查看 CodePen 上 Knut Melvær (@kmelve) 编写的 共享实时照片地图。
如果您想自己测试 Sanity 和这些功能，您可以开始编写 npm i -g @sanity/cli && sanity init。即使 CLI 会引导您完成安装过程，也值得查看 文档（如果不是为了插图本身的话），并且我们的 Slack 群组中总有人愿意帮助解决棘手的问题。