本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

理解内容管理系统（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"）这样的插件能够为编码提供服务器端的协商，确保用户将收到他们的浏览器可能反对的最小、最无效的编码，而不须要<picture>和类型标记模式。它通过应用图像内容交付网络来做到这一点--这是一项你能够本人利用的技术，与你的CMS无关。

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

原文：https://web.dev/learn/images/automating/

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

交换

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

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。