【学习图片】14.网站生成器、框架和内容管理系统

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。 更多开源作品请看 GitHub github.com/qq449245884… ，包含一线大厂面试完整考点、资料以及我的系列文章。

了解内容管理系统（CMS），如WordPress和其他站点生成器如何使响应式图像的使用更加容易。

虽然比起手动保存每张图片的交替剪辑并通过Squoosh.app这样的工具进行手工优化肯定是一种进步，但将图片压缩作为开发过程中的一个步骤也有一些限制。首先，你不一定能完全控制整个网站所使用的图片--网络上大多数面向用户的图片更多的是内容问题，而不是开发问题，它们由用户或编辑上传，而不是与JavaScript和样式表等开发资产一起存在于资源库中。

这通常需要一个以上的图像管理过程：一个开发层面的任务，用于建设和维护网站的图像资产--背景、图标、标志等等；另一个任务是关于通过使用网站产生的图像资产，如编辑团队在帖子中嵌入的照片，或用户上传的头像。虽然上下文可能不同，但最终目标是相同的：根据开发团队定义的设置自动编码和压缩。

幸运的是，你从本地开发工作流程中了解到的图像处理库可以在任何情况下使用。虽然对你的响应式图像标记不可能有一个放之四海而皆准的方法，但这些系统提供了合理的默认值、配置选项和API挂钩，以以便简化其实现。

静态站点生成器

与任务运行器相比，静态网站生成器（如Jekyll或Eleventy）处理图像的方式有一些相似之处。使用这些工具来制作一个可以部署的网站，需要对资产进行管理，包括CSS最小化或转码和捆绑JavaScript。正如你可能想象的那样，这意味着这些工具使你能够以同样的方式处理图像资产，使用你已经了解过的许多库。

Eleventy的官方图像插件使用Sharp来提供调整大小、生成多种源尺寸、重新编码和压缩，就像你在这里学到的一些任务。

与任务运行器不同，静态网站生成器可以直接了解这些库的配置和使用情况，以及为生产网站生成的标记--这意味着它可以做更多的事情来自动化我们的响应式图像标记。例如，当作为显示图像的简码的一部分被调用时，这个插件将根据传递给夏普的配置选项输出HTML。

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>元素、类型属性和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>

当然，这个插件无法生成一个可行的尺寸属性，因为它无法知道图片在渲染的布局中的最终尺寸和位置，但它在生成你的标记时确实接受一个输入--这是RespImageLint的另一项工作。

框架

客户端渲染框架将需要一个任务运行器或像Webpack这样的捆绑器来编辑、编码和压缩图像资产本身。例如，Responsive-loader也使用Sharp库来重新保存图像资产。然后，它允许你将你的图像作为对象导入。

  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是最早采用原生响应式图像标记的公司之一，自从在WordPress 4.4中引入了对WebP的支持和对输出mime类型的控制后，该API已经被逐步改进。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值。

到此为止，你可能已经猜到了，使用尺寸属性的工作就有点麻烦了。在没有任何关于图片在布局中如何使用的信息的情况下，WordPress目前默认的尺寸值实际上是说 "这个图片应该占据100%的可用视口，直到最大的源的固有尺寸"--这是一个可预测的默认值，但对于任何真实世界的应用来说，这不是一个正确的默认值。请确保使用wp_calculate_image_sizes()来在你的模板中设置适合上下文的尺寸属性。

当然，有无数的WordPress插件致力于使现代图像工作流程对开发团队和用户都更快。也许最令人兴奋的是，像Jetpack的网站加速器（以前的 "Photon"）这样的插件可以为编码提供服务器端的协商，确保用户将收到他们的浏览器能够支持的最小、最有效的编码，而不需要和类型标记模式。它通过使用图像内容交付网络来做到这一点--这是一项你可以自己利用的技术，与你的CMS无关。

所有这些也适用于像Shopify这样的托管CMS解决方案，尽管机制本身会有些不同：通过元素提供类似的钩子来生成备用的图像源和相应的srcset属性和艺术指导。

原文：web.dev/learn/image…

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。