许多站点请求大量资源（如图像）未针对某些屏幕进行优化，并发送包含某些设备永远不会使用的样式的大型 CSS 文件。使用媒体查询是向不同屏幕提供定制样式表和资产的一种流行技术，以减少传输给用户的数据量并提高页面加载性能。

本文将演示如何使用媒体查询发送仅与所需的图像一样大的图像，这种技术通常称为响应式图像。

先决条件

本指南假定你熟悉 Chrome 开发工具。如果你愿意，可以使用其他浏览器的 DevTools 代替。你只需将本指南中的 Chrome DevTools 屏幕截图映射到你选择的浏览器中的相关功能。

了解响应式背景图像

首先，分析未优化网络流量的演示：

1. 在新的 Chrome 选项卡中打开未优化的演示。
2. 按Control+Shift+J（或 Mac上 的Command+Option+J）打开 DevTools。
3. 单击“网络”选项卡。
4. 重新加载页面。

你会看到唯一请求的图像是background-desktop.jpg，它的大小为 1006KB：

调整浏览器窗口的大小，并注意到网络日志没有显示页面正在发出的任何新请求。这意味着对所有屏幕大小使用相同的图像背景。

你可以在 style.css 中看到控制背景图像的样式:

body { 
  background-position: center center; 
  background-attachment: fixed; 
  background-repeat: no-repeat; background-size: cover; 
  background-image: url(images/background-desktop.jpg); 
} 

以下是每个使用的属性的含义：

• background-position: center center：垂直和水平居中图像。
• background-repeat: no-repeat：仅显示一次图像。
• background-attachment: fixed：避免滚动背景图像。
• background-size: cover：调整图像大小以覆盖整个容器。
• background-image: url(images/background-desktop.jpg)：图像的 URL。

合并后，这些样式会告诉浏览器将背景图像调整到不同的屏幕高度和宽度。这是实现反应迅速背景的第一步。

对于所有屏幕大小使用单个背景图像都有一些限制：

• 发送的字节量相同，无论屏幕大小如何，即使对于某些设备（如手机），更小、更轻量级的图像背景看起来同样好。通常，你希望发送在用户屏幕上仍然看起来良好的尽可能小的图像，以提高性能并保存用户数据。
• 在较小的设备中，图像将被拉伸或剪切以覆盖整个屏幕，从而可能将背景的相关部分隐藏给用户。

下一节将学习如何根据用户的设备应用优化来加载不同的背景图像。

使用媒体查询

使用媒体查询是声明仅适用于特定媒体或设备类型的样式表的常见技术。它们是通过使用@media规则实现的，该规则允许你定义一组断点，其中定义了特定的样式。当满足@media规则定义的条件(例如，特定的屏幕宽度)时，将应用在断点内定义的一组样式。

以下步骤可用于将媒体查询应用到站点，以便根据请求页面的设备的最大宽度使用不同的图像。

• 在style.css中删除包含背景图像 URL 的行：

  body { 
    background-position: center center; 
    background-attachment: fixed; 
    background-repeat: no-repeat; background-size: cover; 
    background-image: url(images/background-desktop.jpg); 
  } 

• 接下来，根据移动屏幕、平板电脑和桌面屏幕通常具有的像素的通用尺寸，为每个屏幕宽度创建一个断点：

  对于移动端：

  @media (max-width: 480px) {
      body {
          background-image: url(images/background-mobile.jpg);
      }
  } 

  对于平板电脑：

  @media (min-width: 481px) and (max-width: 1024px) {
      body {
          background-image: url(images/background-tablet.jpg);
      }
  } 

  对于桌面设备：

  @media (min-width: 1025px) {
      body {
  	    background-image: url(images/background-desktop.jpg);
     }
  } 

测试不同的设备

接下来在不同的屏幕尺寸上和模拟移动设备测试：

• 在一个新的 Chrome 标签页中打开优化后的站点。
• 缩小窗口（小于 480px）。
• 按Control+Shift+J（或 Mac 上的Command+Option+J）打开 DevTools。
• 单击 Network 选项卡。
• 重新加载页面。请注意background-mobile.jpg图像是如何被请求的。
• 让你的窗口更宽。当宽度超过 480px 时，请注意background-tablet.jpg是如何被请求的。当宽度超过 1025px 时，请注意background-desktop.jpg是如何被请求的。

更改浏览器屏幕的宽度时，将请求新图像。

特别是当宽度低于移动断点中定义的值（480px）时，你会看到以下网络日志:

总结

在本指南中，你学习了如何应用媒体查询来请求背景图像，这些背景图像是根据特定的屏幕大小定制的，并在移动电话等较小的设备上访问站点时节省字节。你使用了@media规则来实现一个响应式背景。所有浏览器都广泛支持这项技术。一个新的 CSS 特性：image-set()，可以使用更少的代码行来实现同样的目的。在撰写本文时，并不是所有浏览器都支持该特性，但是你可能希望关注采用该特性的发展过程，因为它可能是该技术的一种有趣的替代方法。

建立在所有主要浏览器上都能正常运行的网站是开放式网络生态系统的核心宗旨。但是，这意味着要进行额外的工作，以确保计划要定位的每个浏览器都支持你编写的所有代码。如果要使用新的 JavaScript 语言功能，则需要为尚不支持这些功能的浏览器将这些功能转换为向后兼容格式。

Babel 是使用最广泛的工具，用于将包含较新语法的代码编译为不同的浏览器和环境（例如 Node）可以理解的代码。本指南假定你正在使用 Babel，因此如果你尚未使用 Babel，则需要按照设置说明将其包含在应用程序中。选择webpack 的Build Systems，如果你正在使用的 WebPack 为你的应用程序模块捆绑。

有趣的事实：Lebab 是一个独立的库，其功能与 Babel 相反。它将较旧的代码转换为较新的语法。

要使用 Babel 仅转换用户所需的内容，你需要：

1. 确定要定位的浏览器。
2. 使用@babel/preset-env适当的浏览器目标。
3. 使用<script type="module">停止发送 transpiled 代码不需要它的浏览器。

确定要定位的浏览器

在开始修改应用程序中代码的编译方式之前，你需要确定哪些浏览器可以访问你的应用程序。分析你的用户当前正在使用哪些浏览器，以及你打算针对哪些浏览器做出明智的决定。

使用 @ babel /preset-env

编译代码通常会导致文件大于原始文件，而文件大小大于原始文件的大小。通过最大程度地减少编译量，可以减少捆绑软件的大小，从而提高网页的性能。

Babel 提供了许多将插件捆绑在一起的预设，而不是包括特定的插件来选择性地编译你正在使用的某些语言功能。使用 @ babel / preset-env 仅包含你计划定位的浏览器所需的转换和 polyfill。

@babel/preset-env在presets阵列中包含 Babel 配置文件.babelrc：

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
} 

使用该targets字段可通过向该字段添加适当的查询来指定要包括的浏览器版本browsers。@babel/preset-env 与浏览器列表集成，这是一个在不同工具之间共享的开源配置，用于定位浏览器。兼容查询的完整列表在 browserslist 文档中。另一个选择是使用.browserslistrc文件列出你希望定位的环境。

该">0.25%"值告诉 Babel 仅包含支持占全球使用量的 0.25％以上的浏览器所需的转换。这样可确保你的软件包中不包含用于极少数用户使用的浏览器的不必要的代码转换。

在大多数情况下，这是比使用以下配置更好的方法：

"targets": "last 2 versions" 

该"last 2 versions"值将为每个浏览器的后两个版本转换代码 ，这意味着将为已停止使用的浏览器（例如 Internet Explorer）提供支持。如果你不希望使用这些浏览器来访问应用程序，则可能会不必要地增加捆绑软件的大小。

最终，你应该选择适当的查询组合，以仅定位满足你需求的浏览器。

启用现代的错误修复

@babel/preset-env将多个 JavaScript 语法功能分组到集合中，并根据指定的目标浏览器启用 / 禁用它们。尽管这很好用，但是当目标浏览器仅包含一个功能的错误时，将转换整个语法功能的集合。这通常会导致转换后的代码多于必要。

最初作为一个单独的预设中， 错误修正选项中@babel/preset-env 解决这个问题，通过将现代语法，在某些浏览器坏到最接近的等效语法未在这些浏览器打破。结果是几乎相同的现代代码，并进行了一些小的语法调整，以保证在所有目标浏览器中的兼容性。要使用此优化，请确保已@babel/preset-env安装 7.10 或更高版本，然后将该 bugfixes属性设置 为true：

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
} 

在 Babel 8 中，bugfixes默认情况下将启用该选项。

使用<script type="module">

JavaScript 模块或 ES 模块是所有主要浏览器都支持的相对较新的功能 。你可以使用模块来创建可以从其他模块导入和导出的脚本，但是也可以将它们与@babel/preset-env仅用于支持它们的目标浏览器一起使用。

与其查询特定的浏览器版本或市场份额，不如"esmodules" : true在.babelrc文件targets字段内指定。

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
} 

在支持 JavaScript 模块的环境中，已经支持使用 Babel 编译的许多更新的 ECMAScript 功能。因此，通过这样做，你可以简化确保仅将转码的代码用于实际需要的浏览器的过程。

支持模块的浏览器将忽略具有nomodule属性的脚本。相反，不支持模块的浏览器会使用忽略脚本元素 type="module"。这意味着你可以包括一个模块以及一个编译后备。

理想情况下，应包含应用程序的两个版本脚本，如下所示：

 <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script> 

支持模块的浏览器将获取，执行main.mjs和忽略compiled.js。不支持模块的浏览器则相反。

默认情况下推迟模块脚本。该 defer 属性已添加到 nomodule 脚本中以实现相同的行为。

如果使用 webpack，则可以在配置中为应用程序的两个不同版本设置不同的目标：

• 仅适用于支持模块的浏览器的版本。
• 包含可在任何旧版浏览器中运行的已编译脚本的版本。由于转译需要支持更广泛的浏览器，因此文件大小更大。

尽管此 HTML 方法可以提供性能优势，但已发现某些浏览器在同时指定模块脚本和无模块脚本时会进行双重提取。杰森・米勒（Jason Miller）的《现代脚本加载》（Modern Script Loading）更详细地说明了这一点，并介绍了一些可用于规避此问题的选项。

网站中的图像和视频部分可能很重要。如果图像和视频资源过于臃肿时，会对访问者造成很大的困扰。幸运的是，延迟加载是一种可以减少初始页面有效负载和加载时间，而且不会损失访问者的时间。

什么是延迟加载？

延迟加载是一种在页面加载时推迟非关键资源加载的技术。而是在需要时加载这些非关键资源。在涉及图像的地方，“非关键” 通常与 “屏幕外” 同义。如果你使用了 Lighthouse 并研究了一些改进的机会，那么你可能已经以 Defer offscreen images audit 的形式看到了该领域的一些指导 ：

你可能已经看到了延迟加载的实际效果，它看起来像这样：

• 访问页面，并在阅读内容时开始滚动。
• 在某个时候，将占位符图像滚动到视口中。
• 占位符图像突然被最终图像替换。

可以在流行的发布平台 Medium 上找到图像延迟加载的示例，该平台 在页面加载时加载轻量级的占位符图像，并在滚动到视口时将它们替换为延迟加载的图像。

如果你不熟悉延迟加载，你可能会想知道该技术的实用性以及它的好处。请仔细阅读本文，找出答案！

为什么要延迟加载图像或视频而不是仅加载它们？

因为你可能正在加载用户可能永远看不到的内容。这是有问题的，原因如下：

• 浪费数据。在不限流量的连接上，这并不是最糟糕的事情（尽管你可能会使用宝贵的带宽来下载其他用户确实会看到的资源）。但是，在有限的数据计划中，加载用户从未见过的东西实际上可能是在浪费他们的钱。
• 浪费处理时间，电池和其他系统资源。下载媒体资源后，浏览器必须对其进行解码并在视口中呈现其内容。

延迟加载图像和视频可减少初始页面加载时间，初始页面权重和系统资源使用率，所有这些都会对性能产生积极影响。

实施延迟加载

有多种方法可以实现延迟加载。你选择的解决方案必须考虑到你所支持的浏览器以及你要延迟加载的内容。

现代浏览器实现了内置的延迟加载功能，可以使用 img 和 iframe 上的 loading 属性启用该功能。为了提供与旧版浏览器的兼容性或在没有内置延迟加载的情况下对元素执行延迟加载，你可以使用自己的 JavaScript 实现解决方案。还有许多现有的库可以帮助你完成此任务。有关所有这些方法的完整详细信息，请参见本网站上的文章：

• 延迟加载图像
• 延迟加载视频

结论

请谨慎使用延迟加载，延迟加载图像和视频会有效地降低站点的初始加载时间和页面有效负载。用户不会产生不必要的网络活动和他们可能从未见过的媒体资源的处理成本，但是如果愿意，他们仍然可以查看这些资源。

与图像元素一样，你也可以延迟加载视频。视频通常会加载 <video> 元素（尽管出现了一种实现方式有限的替代方法 ）。但是，如何延迟加载 <video> 取决于用例。让我们讨论一些需要不同解决方案的场景。

禁止视频自动播放

对于由用户启动播放的视频（即不 自动播放的视频），可能需要在 <video> 元素上指定 preload 属性：

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video> 

上面的示例使用preload值为的属性none来防止浏览器预加载任何视频数据。该poster 属性为<video>元素提供一个占位符，该占位符将在视频加载时占用空间。这样做的原因是，加载视频的默认行为可能因浏览器而异：

• 在 Chrome 中，默认preload值为auto，但从 Chrome 64 开始，现在默认为metadata。即便如此，在桌面版 Chrome 上，也可以使用Content-Range标题预加载一部分视频。Firefox，Edge 和 Internet Explorer 11 的行为类似。
• 与台式机上的 Chrome 一样，Safari 的 11.0 台式机版本将预加载一系列视频。从版本 11.2 开始，仅视频元数据被预加载。在 iOS 上的 Safari 中，不会预加载视频。
• 当数据保护模式被激活，preload 默认为 none。

因为关于浏览器的默认行为preload不是一成不变的，所以明确是你最好的选择。在这种情况下，当用户启动播放时，使用preload="none"是在所有平台上推迟视频加载的最简单方法。该preload属性不是推迟加载视频内容的唯一方法。

通过视频预加载进行快速播放可能会给你一些思路和见解，以帮助你使用 JavaScript 进行视频播放。

不幸的是，当你要使用视频代替 GIF 动画时，它没有用，这将在后面介绍。

用 GIF 动画代替视频

尽管动画 GIF 广泛使用，但它们在许多方面均不如视频等效，尤其是在文件大小方面。动画 GIF 可以扩展到几兆字节的数据范围。具有类似视觉质量的视频往往要小得多。

使用<video>元素代替动画 GIF 并不像<img>元素那样简单。动画 GIF 具有三个特征：

1. 它们在加载时会自动播放。
2. 它们不断循环。
3. 他们没有音轨。

使用<video>元素实现此目标看起来像这样：

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video> 

但是如何进行延迟加载呢？Chrome 会为你延迟加载视频，但你不能指望所有浏览器都能提供这种优化的行为。根据你的听众和应用程序要求，你可能需要自己处理问题。首先，相应地修改你的 <video> 标记：

<video autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video> 

你会注意到添加了 poster 属性，该属性使你可以指定占位符以占据 <video> 元素的空间，直到视频被延迟加载为止。与 <img> 延迟加载示例一样，将视频 URL 存储 data-src 在每个 <source> 元素的属性中。从那里开始，使用 JavaScript 代码类似于基于 Intersection Observer 的图像延迟加载示例：

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
}); 

延迟加载<video>元素时，需要遍历所有子 <source>元素并将其data-src属性翻转为src属性。完成此操作后，你需要通过调用元素的load方法来触发视频的加载，然后媒体将根据该autoplay属性自动开始播放。

使用此方法，你可以得到一个模拟动画 GIF 行为的视频解决方案，但是不会像动画 GIF 那样产生大量的数据使用量，因此你可以延迟加载该内容。

延迟加载库

以下库可以帮助你延迟加载视频：

• lozad.js 是仅使用 “IntersectionObserver” 的超轻量级选项。因此，它具有很高的性能，但需要先进行填充，然后才能在较旧的浏览器上使用它。
• yall.js 是一个使用 Intersection Observer 并回退到事件处理程序的库。与 IE11 和主要浏览器兼容。
• 如果你需要特定于 React 的延迟加载库，可以考虑 react-lazyload。尽管它不使用 Intersection Observer，但确实为习惯于使用 React 开发应用程序的用户提供了一种熟悉的延迟加载图像的方法。

这些延迟加载库中的每一个都有充分的文档记录，并为你的各种延迟加载工作提供了大量标记模式。

由于 HTML 作为<img>元素或 CSS 背景图像内联在 HTML 中，因此图像可以出现在网页上。在本文中，你将发现如何延迟加载两种类型的图像。

图像懒加载

最常见的延迟加载候选是<img>元素中使用的图像。对于嵌入式图像，我们提供了三种用于延迟加载的选项，可以将它们组合使用，以实现跨浏览器的最佳兼容性：

• 使用浏览器级别的延迟加载
• 使用路口观察器
• 使用滚动和调整大小事件处理程序

使用浏览器级别的延迟加载

Chrome 和 Firefox 都支持带有该loading属性的延迟加载。此属性可以添加到<img>元素，也可以添加到<iframe>元素。值lazy告诉浏览器立即将图像加载到视口中，并在用户在其附近滚动时获取其他图像。

注意<iframe loading="lazy">当前是非标准的。虽然已在 Chromium 中实施，但尚无规范，一旦使用，将来可能会进行更改。我们建议你不要使用loading属性来延迟加载 iframe，直到该属性成为规范的一部分。

有关浏览 器支持的详细信息，请参见 loading MDN 的浏览器兼容性表的字段 。如果浏览器不支持延迟加载，则该属性将被忽略，并且图像将照常加载。

对于大多数网站，将此属性添加到嵌入式图像中将提高性能，并节省用户加载他们可能永远不会滚动到的图像。如果你有大量图像，并且想要确保不支持延迟加载的浏览器用户受益，则需要将其与下面介绍的一种方法结合使用。

使用视图检查

为了填充<img>元素的延迟加载，我们使用 JavaScript 来检查元素是否在视口中。如果是这样，则会使用指向所需图像内容的 URL 填充其src（有时是srcset）属性。

如果你之前编写过延迟加载代码，则可能已通过使用事件处理程序（例如scroll或）完成了任务resize。尽管这种方法在所有浏览器之间都是最兼容的，但是现代浏览器提供了一种更高效，更高效的方法来通过 Intersection Observer API 来检查元素可见性。

并非所有浏览器都支持 Intersection Observer，特别是 IE11 和更低版本。如果跨浏览器的兼容性至关重要，请确保阅读下一部分，该部分向你展示如何使用性能较低（但兼容性更高！）的滚动和调整事件处理程序大小来延迟加载图像。

与依赖各种事件处理程序的代码相比，Intersection Observer 更易于使用和阅读，因为你只需要注册一个观察者即可观察元素，而不必编写繁琐的元素可见性检测代码。剩下要做的就是决定当元素可见时该怎么做。让我们为延迟加载的<img>元素假定以下基本标记模式：

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!"> 

你应该关注此标记的三个相关部分：

1. 的class属性，它是什么，你会在 JavaScript 中选择元素。
2. 该src属性引用一个占位符图像，该图像将在页面首次加载时出现。
3. 在data-src和data-srcset属性，这是包含一旦元素中视，你会加载图像的 URL 占位符属性。

现在，让我们看看如何使用 JavaScript 的 Intersection Observer 通过这种标记模式来延迟加载图像：

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
}); 

在文档DOMContentLoaded事件中，此脚本在 DOM 中查询所有 <img>带有类别的元素lazy。如果 Intersection Observer 可用，请创建一个新的观察器，当img.lazy元素进入视口时运行该观察器。

所有现代浏览器均支持 Intersection Observer。因此，将其用作 polyfillloading="lazy"将确保大多数游客可以使用延迟加载。它在 Internet Explorer 中不可用。如果 Internet Explorer 支持至关重要，请继续阅读。

使用事件处理程序获得 Internet Explorer 支持

虽然应该使用 Intersection Observer 进行延迟加载，但是你的应用程序要求可能对浏览器兼容性至关重要。你可以 填充工具路口观察的支持（这是最简单的），但你也可以使用回落到代码 scroll， resize以及可能的 orientationchange 事件处理程序在音乐会 getBoundingClientRect 以确定元素是否在检视。

假设以前的标记模式相同，此 Glitch 示例将getBoundingClientRect在scroll事件处理程序中使用以检查img.lazy视口中是否有任何元素。甲setTimeout调用用于延迟处理，和一个active变量包含其用于节流函数调用的处理的状态。由于图像是延迟加载的，因此它们已从 elements 数组中删除。当 elements 数组达到的length时0，滚动事件处理程序代码将被删除。

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
}); 

尽管此代码几乎可以在任何浏览器中使用，但它仍然存在潜在的性能问题，即使重复setTimeout调用可能很浪费，但重复调用却很浪费。在此示例中，无论视口中是否有图像，都会每 200 毫秒检查一次文档滚动或调整窗口大小。此外，开发人员还需要乏味的工作来跟踪剩下多少元素以进行延迟加载并取消绑定滚动事件处理程序。

简而言之：在可能的情况下，将浏览器级别的延迟加载与后备 Intersection Observer 实现一起使用，并且只有在最大可能的兼容性是关键的应用程序要求时才使用事件处理程序。

背景图片

尽管<img>标记是在网页上使用图像的最常见方式，但是也可以通过 CSSbackground-image 属性（和其他属性）来调用图像 。浏览器级别的延迟加载不适用于 CSS 背景图像，因此，如果要延迟加载背景图像，则需要考虑其他方法。

与不<img>考虑可见性而加载的元素不同，CSS 中的图像加载行为是通过更多的猜测来完成的。当文件和 CSS 对象模型 和渲染树 是建立，浏览器探讨如何 CSS 请求外部资源之前应用于文档。如果浏览器确定涉及外部资源的 CSS 规则不适用于当前构造的文档，则浏览器不会请求该文档。

通过使用 JavaScript 确定元素何时在视口中，然后将一个类应用于该元素，以应用样式调用背景图像，可以将这种推测性行为用于推迟 CSS 中图像的加载。这将导致在需要时而不是在初始加载时下载图像。例如，让我们以包含背景图像的元素为例：

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div> 

该div.lazy-background元素通常包含一些 CSS 调用的英雄背景图像。但是，在此延迟加载示例中，你可以通过 在视口中添加到元素的类来隔离div.lazy-background元素的background-image属性visible：

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
} 

从这里开始，使用 JavaScript 检查该元素是否在视口中（使用 Intersection Observer！），然后在visible该div.lazy-background元素上添加类 ，从而加载图像：

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
}); 

如前所述，如果你需要 Internet Explorer 支持延迟加载背景图像，则由于该浏览器缺乏支持，因此需要填充 Intersection Observer 代码。

延迟加载库

以下库可用于延迟加载图像。

• lazysizes 是功能齐全的延迟加载库，可延迟加载图像和 iframe。它使用的模式与此处显示的代码示例非常相似，因为它会自动绑定到元素上的 lazyload类<img>，并且需要你在data-src和 / 或data-srcset属性中指定图像 URL ，它们的内容分别交换到src和 / 或srcset属性中。它使用 Intersection Observer（可以填充），并且可以使用许多插件进行扩展以执行诸如延迟加载视频之类的操作。
• lozad.js 是仅使用 “路口观察器” 的超轻量级选项。因此，它具有很高的性能，但需要先进行填充，然后才能在较旧的浏览器上使用它。
• yall.js 是一个使用 Intersection Observer 并回退到事件处理程序的库。与 IE11 和主要浏览器兼容。
• 如果你需要一个特定于 React 的延迟加载库，请考虑 react-lazyload。尽管它不使用 Intersection Observer，但它确实为习惯于使用 React 开发应用程序的用户提供了一种熟悉的延迟加载图像的方法。

图像通常在网页中占用很大的文件大小，并且经常占用大量的视觉空间。因此，优化图像通常可以为你的网站带来一些最大的字节节省和性能改进：浏览器下载的字节越少，客户端带宽的竞争越少，浏览器下载和在屏幕上呈现有用内容的速度越快。

图像优化既是一门艺术，也是一门科学：一门艺术，因为没有一个确切的答案来最好地压缩单个图像，而科学是因为有许多发达的技术和算法可以显著减小图像的大小。要找到图像的最佳设置，需要仔细分析许多维度：格式功能、编码数据的内容、质量、像素尺寸等。

优化矢量图像

所有现代浏览器都支持可扩展矢量图形 （SVG），这是基于 XML 的图像格式，用于二维图形。你可以直接在页面上或作为外部资源嵌入 SVG 标记。大多数基于矢量的绘图软件可以创建 SVG 文件，也可以直接在喜爱的文本编辑器中手动写入这些文件。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg> 

上面的示例呈现下面的简单圆圈形状，具有黑色轮廓和红色背景，并且从 Adobe Illustrator 导出。

以上代码包含大量元数据，如图层信息、注释和 XML 命名空间，这些命名空间通常没有必要在浏览器中呈现资产。因此，通过运行 SVGO 等工具来美化 SVG 文件总是一个好主意。

例如，SVGO 将 Illustrator 生成的上述 SVG 文件的大小减少了 58%，从 470 字节减小到 199 字节。

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg> 

由于 SVG 是基于 XML 的格式，因此你也可以应用 GZIP 压缩来减小其传输大小 - 确保服务器配置为压缩 SVG 资源！

栅格图像只是单个 "像素" 的二维网格，例如，100x100 像素图像是 10，000 像素序列。反过来，每个像素存储 "RGBA" 值：（R）红色通道、（G）绿色通道、（B）蓝色通道和（A）alpha（透明度）通道。

在内部，浏览器为每个通道分配 256 个值（阴影），这转换为每个通道 8 位（2 + 8 = 256），每个像素分配 4 个字节（4 个通道 x 8 位 = 32 位 = 4 个字节）。因此，如果我们知道网格的尺寸，我们可以轻松地计算文件化：

• 100x100 像素图像由 10，000 像素组成
• 10,000 像素 x 4 字节 = 40，000 字节
• 40,000 字节 / 1024 = 39 KB

顺便说一下，无论用于将数据从服务器传输到客户端的图像格式如何，当图像被浏览器解码时，每个像素始终占用 4 字节的内存。对于没有大量可用内存的大型图像和设备（例如，低端移动设备），这可能是一个重要限制因素。

39 KB 的 100x100 像素图像可能看起来没什么大不了的，但文件化快速爆炸为较大的图像，使图像资产下载速度慢且成本高昂。这篇文章到目前为止只关注 "未压缩" 的图像格式。值得庆幸的是，可以做很多工作来减小图像文件的大小。

一个简单的策略是将图像的 "位深度" 从每个通道 8 位减小到较小的调色板：每个通道 8 位，每个通道提供 256 个值，总共提供 16，777，216 （256 + 3） 颜色。如果将调色板减为 256 种颜色，会怎么样？然后，你只需要 RGB 通道总共 8 位，并立即节省两个字节 / 像素 - 这是 50% 的压缩节省比原来的 4 字节 / 像素格式！

具有渐变颜色过渡（例如，渐变或天空）的复杂场景需要较大的调色板来避免视觉伪影，如 5 位资产中的像素化天空。另一方面，如果图像只使用几种颜色，那么一个大调色板只是浪费宝贵的位！

接下来，一旦优化了存储在单个像素中的数据，你就可以更加聪明地查看附近的像素：事实证明，许多图像，尤其是照片，都有许多颜色相似的附近像素，例如天空、重复纹理等。利用此信息，压缩机可以应用增量编码，其中可以存储附近像素之间的差值，而不是存储附近的像素之间的差值：如果相邻像素相同，则增量为 "零"，你只需要存储单个位！

人眼对不同颜色的敏感度不同：你可以通过减少或增加这些颜色的调色板来优化颜色编码以考虑这一点。"邻近" 像素形成二维网格。这意味着每个像素都有多个邻居：你可以使用此事实进一步改进增量编码。你可以查看附近像素的较大块，并使用不同的设置对不同的块进行编码，而不是只查看每个像素的近邻。

正如你所想的，图像优化变得复杂迅速（或有趣，这取决于你的观点），是学术和商业研究的积极领域。图像占用大量的字节，有很多的价值，在开发更好的图像压缩技术！如果你好奇地想了解更多信息，请前往维基百科页面，或者查看 WebP 压缩技术白皮书，了解一个动手示例。

这一切都很棒，但也非常学术性：它如何帮助你优化你网站上的图像？嗯，了解问题的形状很重要：RGBA 像素、位深度和各种优化技术。在深入探讨各种栅格图像格式的讨论之前，所有这些概念对于理解和记住这些概念都至关重要。

无损图像压缩与有损图像压缩

对于某些类型的数据（如页面的源代码或可执行文件），压缩器不更改或丢失任何原始信息至关重要：单个缺失或错误的数据位可能会完全更改文件内容的含义，或者更糟的是，完全中断该文件的内容。对于某些其他类型的数据（如图像、音频和视频），提供原始数据的 "近似" 表示形式是完全可以接受的。

事实上，由于眼睛的工作原理，我们通常可以摆脱丢弃一些有关每个像素的信息，以减少图像的档案化，例如，我们的眼睛对不同颜色有不同的灵敏度，这意味着我们可以使用更少的位来编码某些颜色。因此，典型的图像优化管道由两个高级步骤组成：

1. 图像使用有损过滤器处理，该过滤器消除了某些像素数据。
2. 图像使用压缩像素数据的无损滤镜进行处理。

第一步是可选的，确切的算法将取决于特定的图像格式，但重要的是要了解，任何图像可以经历有损压缩步骤，以减少其大小。事实上，各种图像格式（如 GIF、PNG、JPEG 和其他格式）之间的区别在于，在应用有损和无损步骤时，它们使用（或省略）的特定算法的组合。

那么，什么是亏损和无损优化的 "最佳" 配置呢？答案取决于图像内容和你自己的条件，例如文件化和有损压缩引入的工件之间的权衡：在某些情况下，你可能希望跳过有损优化，以完全保真度传达复杂的细节。在其他情况下，你可能能够应用积极的有损优化来降低图像资产的文件化。这是你自己的判断和上下文需要发挥作用的地方 —— 没有一个通用的环境。

作为实践示例，当使用有损格式（如 JPEG）时，压缩器通常会公开一个可自定义的 "质量" 设置（例如，Adobe Photoshop 中的 "为 Web 保存" 功能提供的质量滑块），该滑块通常是控制特定无损和无损算法集合的内部工作值的数字 1 和 100 之间。为了获得最佳效果，请对图像进行各种质量设置的实验，不要害怕降低质量 ，视觉效果通常非常好，文件化节省可能相当大。

请注意，由于用于对图像进行编码的算法不同，不同图像格式的质量级别无法直接比较：90 质量 JPEG 将产生的结果与90 质量 WebP 的结果非常不同。事实上，即使同一图像格式的质量级别，也可能根据压缩机制的实现产生明显不同的输出！

图像优化清单

在优化图像时，需要牢记一些提示和技术：

• 首选矢量格式：矢量图像是分辨率和比例独立的，这使得它们非常适合多设备和高分辨率世界。
• 压缩和压缩 SVG 资产：[XML] [SVG] GZIP
• 与较旧的栅格格式不同，WebP 更喜欢 WebP：WebP 图像通常比旧图像小得多。
• 选择最佳栅格图像格式：确定你的功能要求，并选择适合每个特定资产的格式。
• 尝试栅格格式的最佳质量设置：不要害怕拨下 "质量" 设置，结果通常非常好，字节节省显著。
• 删除不必要的图像元数据：许多栅格图像包含有关资产的不必要元数据：地理信息、摄像机信息等。使用适当的工具删除此数据。
• 提供缩放图像：调整图像大小，确保 "显示" 大小尽可能接近图像的 "自然" 大小。尤其要密切注意大型图像，因为它们在调整大小时占最大开销！
• 自动化、自动化、自动化：投资于自动化工具和基础架构，确保你的所有映像资产始终得到优化。