网站生成器、框架和 CMS

了解 WordPress 等 CMS 和其他网站生成器如何实现让自适应图片更易于使用

当然，与手动保存每张图片的备用图片并借助 Squoosh.app 在开发过程中自动执行图片压缩，但存在一些局限性。首先，你可能无法始终完全控制整个网站中使用的图片，因为网络上大多数向用户显示的图片都是内容问题由用户或编辑者上传，而不是与开发资产（如 JavaScript 和样式表。

这通常需要多个流程来管理图片：制作并维护网站（背景、图标、徽标等）以及其他内容，这些内容与通过使用生成的图片素材资源相关例如，编辑团队在帖子中嵌入的照片或用户上传的头像。虽然上下文可能不同，最终目标都是相同的：根据开发团队定义的设置自动编码和压缩。

幸运的是，您从本地开发工作流中学到的图像处理库可用于任意数量的上下文。虽然在处理自适应图片标记时，可能没有万能的方法，但这些系统可提供合理的默认值、配置选项和 API 钩子来简化其实现过程。

静态网站生成器

与任务运行程序相比，Jekyll 或 Eleventy 等静态网站生成器处理图片的方式有一些相似之处。使用这些工具需要对资源进行管理，包括 CSS 缩减或转译和捆绑代码。正如您想象的那样，这意味着这些工具可让您使用许多库以同样的方式处理图片资源，一些示例。

Eleventy 的官方图片插件使用 Sharp 来提供大小调整、生成多种源大小、重新编码和压缩的功能，就像您在本文中学到的一些任务一样。

与任务运行程序不同，静态网站生成器可以直接深入了解这些库的配置和使用情况，以及为生产网站生成的标记，这意味着它在自动处理响应式图片方面可以做得更多标记。例如，当作为用于显示图片的短代码的一部分进行调用时，此插件会根据传递给 Sharp 的配置选项


const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {

async function imageShortcode(src, alt, sizes="100vw") {
  let metadata = await Image(src, {
  formats: ["avif", "webp", "jpeg"],
  widths: [1000, 800, 400],
  outputDir: "_dist/img/",
  filenameFormat: function( id, src, width, format, options ) {
      const ext = path.extname( src ),
        name = path.basename( src, ext );

      return `${name}-${width}.${format}`
  }
  });

  let imageAttributes = {
  alt,
  sizes,
  loading: "lazy"
  };

  return Image.generateHTML(metadata, imageAttributes);
}

eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};

然后，可以使用此短代码来代替默认的图片语法：

{‌% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}

如上所示，如果配置为输出多种编码，则生成的标记将是包含以下内容的 <picture> 元素：相应的 <source> 元素、type 属性和 srcset 属性已填充生成候选大小。

<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>

当然，此插件无法生成有效的 sizes 属性，因为它不知道最终的尺寸和位置但在生成标记时接受一个输入作为输入，这是 RespImageLint 的另一个作业。

框架

客户端渲染框架需要使用任务运行程序或打包器（如 Webpack）来修改、编码和压缩图片资源。例如，自适应加载器也会使用 Sharp 库来重新保存图片素材资源。然后，您可以然后 import 将您的图片作为对象：

  import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
  import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
  import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';

然后，您可以通过 React 的图片组件等抽象使用这些导入的图片，或者填充您的自适应图片，图片标记：

<picture>
  <source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
  <source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
  <img
    src={imageDefault.src}
    srcSet={imageDefault.srcSet}
    width={imageDefault.width}
    height={imageDefault.height}
    sizes='…'
    loading="lazy"
  />

执行客户端渲染的框架非常适合 Lazysizes 和 sizes="auto"，因此几乎可以自动响应式图片

内容管理系统

WordPress 是最早采用原生自适应图片标记的应用之一，自从推出之后，该 API 就开始逐步改进。在 WordPress 4.4 中引入，支持 WebP 并控制输出 MIME 类型。WordPress 核心旨在使用 ImageMagick PHP 扩展程序（或者，如果没有 GD 库）。

通过 WordPress 管理界面上传图片后，源图片将用于在操作方式与在本地计算机上大致相同。默认情况下，WordPress 输出的所有图片并根据主题中配置的图片大小生成 srcset 属性。

您可以为生成的图片配置两个关键设置，即压缩质量和输出 MIME 类型。

例如，如需将所有生成的图片的默认压缩质量设置为 70，请使用以下命令：

add_filter( 'wp_editor_set_quality', function() { return 70; } );

为了获得更好的压缩效果，请使用以下代码将上传的 JPEG 图片的输出格式切换为 WebP：

add_filter( 'image_editor_output_format', function( $mappings ) {
  $mappings[ 'image/jpeg' ] = 'image/webp';
    return $mappings;
} );

鉴于 WordPress 全面了解所有备选方案以及它根据上传的图片生成的编码，就可以提供辅助函数，比如 wp_get_attachment_image_srcset()至检索为图片附件生成的完整 srcset 值。

您可能已经猜到了，使用 sizes 属性就更加棘手了。缺少任何信息关于如何在布局中使用图片的信息，WordPress 目前默认为 sizes 值，该值实际表示“此图片应占据 100% 的可用视口，不超过来源的固有尺寸 - 这是可预测的默认值，但不是正确的适用于任何实际应用请务必使用 wp_calculate_image_sizes() 在模板中设置上下文适合的 sizes 属性。

当然，有无数的 WordPress 插件专门用于为开发团队和用户等加快现代图片工作流。也许最令人兴奋的是，Jetpack 的 Site Accelerator（以前称为“Photon”）等插件可以为编码提供服务器端协商，确保用户能够收到而无需使用 <picture> 和 type 标记模式，浏览器也能够支持这些 API。它是通过使用图片内容来实现的分发网络 - 一种可供您使用的技术，独立于 CMS。

Shopify 等托管的 CMS 解决方案也是如此，但机制本身会有所不同：提供类似的用于生成替代图片来源和相应 srcset 属性的钩子和艺术指导（通过 <picture> 元素）。