如何为图片元素自动生成调整大小的图像和 HTML 标记？答案

【问题标题】：How to automatically generate resized images and HTML markup for the picture element?如何为图片元素自动生成调整大小的图像和 HTML 标记？
【发布时间】：2019-06-02 03:48:05
【问题描述】：

我正在尝试自动化构建过程，以调整图像大小并为这些生成的图片生成 HTML 标记。问题是我不知道如何做后面的部分。

我已经使用插件gulp-responsive 来调整任意数量的图像大小。不过，这不是一个健康的工作流程，因为我仍然需要为它们中的每一个硬编码 HTML <picture>。

除此之外，我还阅读了 Cloudinary 的 API，它可以调整图像的大小和艺术指导（比 Gulp 插件更好的方法）。问题是，在阅读了 Node.js 的 API docs 之后，我看不到如何自动生成 HTML 标记（就像在 this site 中一样），甚至无法下载生成的图像。

【问题讨论】：

标签： html css node.js cloudinary responsive-images

【解决方案1】：

您可以通过 API 或 UI 在 Cloudinary 中上传资源。如果您使用 API，那么您将获得一个 JSON 响应，其中包含可在 HTML 中使用的资源 URL。像这样的东西：https://cloudinary.com/documentation/image_upload_api_reference#upload_method（在示例响应下阅读）

如果您使用媒体库 UI 上传资源：https://cloudinary.com/console/media_library/folders/all/，那么您将在打开图像后看到 URL（缩略图右上角的编辑图标）或图像缩略图上有一个小图钉可以点击它，它会自动复制图像 URL。

【讨论】：

【解决方案2】：

由于我的 Google 搜索、硬编码实验和阅读一些文章后缺乏答案，我想到自动为调整大小的图像生成标记可能不是最佳选择。

问题是：也许最好使用浏览器开发工具来记录我应该在特定断点中使用的图像分辨率，然后对标记进行硬编码。这种方法可以避免使用断点自动和天真地提升分辨率，如下所示：

<picture>
  <source srcset="./doge-280w.png" 
          media="(max-width: 310px)">

  <source srcset="./doge-472w.png" 
          media="(max-width: 500px)">

  <source srcset="./doge-626w.png" 
          media="(max-width: 575px)">

  <img src="./doge-1000w.png"
       alt="">
</picture>

虽然上面生成的标记可能适用于某些图像，但它不适用于在较高断点处需要较小分辨率的图像。

如果图像在更高的断点处变小，使用上述自动生成的标记将不必要地为用户提供更大的文件，因此破坏了响应式图像的概念。

因此，手动记笔记使我们能够检测到这种图像并为用户提供最佳图像尺寸。

【讨论】：