网站生成器、框架和 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"
  />

执行客户端渲染的框架非常适合 Lazysizessizes="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> 元素)