关于javascript:学习图片13自动压缩和编码

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

本课程中的所有语法——从图像数据的编码到反对响应式图像的信息密集标记语言——都是机器与机器之间通信的办法。

客户端浏览器与服务器互相通信有许多形式。响应式图像标记语言（尤其是 srcset 和sizes）应用较少的字符形容了大量信息。

不论是好是坏，这种简洁是设计进去的：让这些语法不那么简练，从而让开发者更容易了解，可能会让浏览器更难解析它们。字符串的复杂性越高，解析器出错的可能性就越大，或者在不同的浏览器之间呈现无心的行为差别。

然而，能使这些主题感到如此可怕的个性也能为你提供解决方案：机器容易浏览的语法更容易被它们编写。作为 Web 用户，咱们必定遇到过许多自动化图像编码和压缩的示例：通过社交媒体平台、内容管理系统（CMS）甚至电子邮件客户端上传到 Web 的任何图像简直都会通过一个零碎来调整大小、从新编码和压缩。

同样地，无论是通过插件、内部库、独立构建过程工具还是负责应用客户端脚本，响应式图像标记语言都很容易适应自动化。

这是围绕自动化图像性能的两个次要问题：治理图像的创立 – 它们的编码、压缩和你用来填充 srcset 属性的备用起源 – 以及生成咱们面向用户的标记。在本模块中，你将理解一些治理图像的罕用办法，作为古代工作流程的一部分，无论是作为开发过程中的一个自动化阶段，还是通过为你的网站提供能源的框架或内容管理系统，或者通过专门的内容交付网络简直齐全抽象化。

自动化压缩和编码

咱们不太可能花工夫手动确定每个独自图片的最佳编码和压缩级别的地位，也不会想这么做。只管放弃图像传输尺寸尽可能小很重要，但为每个图片微调压缩设置并从新保留备选源对于咱们日常工作中会减少很多工夫。

正如你在浏览各种图片格式和压缩类型时学到的，图像的最无效编码始终取决于其内容，正如你在响应式图片中学到的，你所需的备选尺寸将取决于这些图像在页面布局中所占据的地位。在古代工作流中，你将综合思考这些决策，而不是独自决定——为图像确定一组正当的默认值，以最好地适应它们所用于的上下文环境。

在为一组照片图像抉择编码时，AVIF 在品质和传输尺寸方面是最佳抉择，但其反对无限，WebP 提供了一个优化的古代备选计划，而 JPEG 是最牢靠的默认值。咱们须要为在页面布局中占据侧边栏的图像制作的备选尺寸与咱们在最高断点下占据整个浏览器视口的图像大不相同。压缩设置须要思考到多个后果文件中的含糊和压缩伪影，这样就没有太多的空间来为每个图像刻意缩小每个可能的字节，而须要换取更灵便和牢靠的工作流程。

至于解决自身，有大量的开源图像处理库提供批量转换、批改和编辑图像的办法，它们竞争速度、效率和可靠性。这些解决库容许你一次性对整个目录中的图像利用编码和压缩设置，而无需关上图像编辑软件，并以一种形式保留原始图像源，以便在须要时调整这些设置。它们旨在运行在各种上下文环境中，从本地开发环境到 Web 服务器自身，例如，针对压缩的 Node.js 的 ImageMin 能够通过一系列插件扩大以适应特定应用程序，而跨平台的 ImageMagick 和基于 Node.js 的 Sharp 从一开始就带有惊人的性能。

这些图像处理库使开发者有可能建设专门用于无缝优化图像的工具，作为你的规范开发流程的一部分 – 确保你的我的项目将始终以尽可能少的开销援用生产就绪的图像源。

本地开发工具和工作流程

像 Grunt、Gulp 或 Webpack 这样的工作运行器和捆绑器能够用来优化图像资产和其余常见的性能相干的工作，如 CSS 和 JavaScript 的最小化。为了阐明这一点，让咱们来看看一个绝对简略的用例：你的我的项目中的一个目录蕴含了十几张摄影图片，打算用在一个面向公众的网站上。

首先，你须要确保这些图片的编码统一、高效。正如你在后面的模块中所学到的，WebP 在品质和文件大小方面都是摄影图片的无效默认值。WebP 失去了很好的反对，但不是广泛反对的，所以你也要包含一个渐进式 JPEG 模式的回退。而后，为了利用 srcset 属性来无效地交付这些资产，你须要为每种编码制作多种备用尺寸。

如果应用图像编辑软件实现此操作，这将是一项反复且耗时的琐事，然而像 Gulp 这样的工作运行器就是为自动化这种重复性工作而设计的。gulp-responsive 插件（利用 Sharp）是泛滥选项之一，它们都遵循相似的模式：收集源目录中的所有文件，从新编码它们，并依据你在图像格式和压缩中理解到的雷同标准化的“品质”简写进行压缩。而后将后果文件输入到咱们定义的门路中，筹备在面向用户的 img 元素的 src 属性中援用，同时保留原始文件。

const {src, dest} = require('gulp');
const respimg = require('gulp-responsive');

exports.webp = function() {return src('./src-img/*')
    .pipe(respimg({
      '*': [{
        quality: 70,
        format: ['webp', 'jpeg'],
        progressive: true
      }]
  }))
  .pipe(dest('./img/'));
}

有了这样一个过程，如果我的项目中有人不小心将一张编码为大量真彩色 PNG 的照片增加到蕴含你的原始图像源的目录中，就不会对生产环境造成任何挫伤 – 无论原始图像的编码如何，这项工作将产生一个高效的 WebP 和牢靠的渐进式 JPEG 回退，而且压缩级别能够很容易地进行即时调整。当然，这个过程也确保你的原始图像文件将被保留在我的项目的开发环境中，这意味着这些设置能够在任何时候调整，只有主动输入被笼罩。

为了输入多个文件，你要传递多个配置对象 – 除了减少一个宽度和一个像素值，其余都是一样的。

const {src, dest} = require('gulp');
const respimg = require('gulp-responsive');

exports.default = function() {return src('./src-img/*')
    .pipe(respimg({
      '*': [{
              width: 1000,
              format: ['jpeg', 'webp'],
              progressive: true,
              rename: {suffix: '-1000'}
            },
            {
              width: 800,
              format: ['jpeg', 'webp'],
              progressive: true,
              rename: {suffix: '-800'}
            },
            {
              width: 400,
              format: ['jpeg', 'webp'],
              progressive: true,
              rename: {suffix: '-400'},
          }]
        })
    )
    .pipe(dest('./img/'));
}

在下面的例子中，原始图像（monarch.png）超过了3.3MB。这个工作产生的最大文件（monarch-1000.jpeg）约为 150KB。最小的，monarch-400.web，只有 32KB。

[10:30:54] Starting 'default'...
[10:30:54] gulp-responsive: monarch.png -> monarch-400.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-800.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-400.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-800.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.webp
[10:30:54] gulp-responsive: Created 6 images (matched 1 of 1 image)
[10:30:54] Finished 'default' after 374 ms

当然，你要仔细检查后果，看是否有显著的压缩伪影，或者可能减少压缩量以节俭更多的费用。因为这项工作是非破坏性的，这些设置能够很容易地被扭转。

而且具备韧性的过程，这个工具能够将您对高性能图像资源的常识无缝地利用于整个我的项目，无需任何手动干涉。

响应式图像实际

填充 srcset 属性通常是一个简略的手动过程，因为该属性实际上只捕获在生成源时曾经实现的配置信息。在上述工作中，咱们曾经确定了文件名和宽度信息，这些信息将用于属性：

srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w"

请记住，srcset属性的内容是描述性的，而不是规定性的。只有每个源的宽高比统一，过载 srcset 属性并不会造成任何挫伤。一个 srcset 属性能够蕴含服务器生成的每个备用图像的 URI 和宽度，而不会引起任何不必要的申请。咱们提供给渲染图像更多的备选源，浏览器就能更无效地优化申请。

正如在响应式图像中所学到的，咱们将须要应用 <picture> 元素来无缝地解决 WebP 或 JPEG 回退模式。在这种状况下，将与 srcset 一起应用 type 属性。

<picture>
  <source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
  <img srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>

正如你所学到的，反对 WebP 的浏览器将辨认 type 属性的内容，并抉择该 <source> 元素的 srcset 属性作为图像候选列表。不反对 image/webp 作为无效媒体类型的浏览器将疏忽这个 <source>，并应用外部<img> 元素的 srcset 属性。

在浏览器反对方面还有一点须要思考：不反对任何响应式图像标记的浏览器仍须要一个回退，否则在特地旧的浏览环境中可能会呈现损坏的图像。因为这些浏览器都会疏忽 <picture>、<source> 和srcset，所以咱们须要在外部 <img> 的src属性中指定一个默认起源。

因为放大图像在视觉上是无缝的，而 JPEG 编码是广泛反对的，因而抉择最大的 JPEG 是一个理智的抉择。

<picture>
  <source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
  <img src="filename-1000.jpg" srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>

sizes可能会更加难以解决。sizes是上下文相干的，咱们无奈在不晓得图像在渲染布局中所占空间量的状况下填充该属性。为了使申请尽可能有效率，在最终用户发出请求之前，咱们的标记中就须要有一个精确的 sizes 属性，以便在申请款式规定和页面布局之前。齐全省略 sizes 不仅违反了 HTML 标准，而且会导致默认行为等效于sizes="100vw"——通知浏览器该图像仅受到视口自身的限度，从而抉择最大的候选起源。

与任何特地繁琐的 Web 开发工作一样，曾经创立了许多工具来形象出手写 sizes 属性的过程。respImageLint 是一个相对必要的代码片段，旨在审查你的 sizes 属性的准确性并提供改良倡议。它作为书签工具运行——您、在指向蕴含图像元素的齐全渲染页面时在浏览器中运行。在浏览器齐全了解页面布局的上下文中，它还简直能够精确地感知在每个可能的视口大小下图像在布局中所占用的空间。

一个用于提醒你的尺寸属性的工具当然是有用的，但作为一个全盘生成这些属性的工具，它的价值甚至更大。如你所知，srcset和 sizes 语法旨在以一种视觉上无缝的形式优化图像资产的申请。尽管不应该在生产中应用，但在本地开发环境中解决页面布局时，默认的尺寸占位符值为 100vw 是齐全正当的。一旦布局格调到位，运行 respImageLint 将为你提供量身定做的尺寸属性，你能够将其复制并粘贴到你的标记中，其具体水平远远超过手工书写。

只管由服务器出现的标记发动的图像申请过于迅速，以至于 JavaScript 无奈生成客户端大小属性，但如果这些申请是由客户端发动的，则不能利用同样的推理。例如，Lazysizes 我的项目容许您齐全推延图像申请，直到布局曾经建设，容许 JavaScript 为咱们生成大小值 - 这对您来说十分不便，并为您的用户提供了最高效的申请保障。请记住，这种办法意味着就义了服务器出现的标记和浏览器内置的速度优化的可靠性，只有在页面出现后才启动这些申请将对您的 LCP 评分产生适度负面影响。

当然，如果你曾经依赖于客户端渲染框架，例如 React 或 Vue，则您曾经在承当这种债权 - 在这些状况下，应用 Lazysizes 意味着您的大小属性能够简直齐全抽象化。更好的是：随着 lazy loaded images 上 sizes=”auto” 取得共识和本机实现，Lazysizes 将无效地成为新标准化的浏览器行为的 polyfill。

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

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

交换

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

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