此页面由 Cloud Translation API 翻译。

自适应图片

一图胜千言，图像也是每个页面不可或缺的组成部分。但是，图像通常也占了下载字节的多数。有了自适应网页设计，不仅我们的布局能根据设备特性而变化，图像也可以。

Pete LePage

自适应网页设计意味着，不仅我们的布局能根据设备特性而变化，内容也可以。例如，高分辨率 (2x) 显示屏上高分辨率图形可保证清晰度。当浏览器宽度为 800px 时，一张 50% 宽度的图像或许很适合，但在一款很窄的手机上，则会占用太多屏幕空间，并且缩小图像来适应较小的屏幕时，耗费的带宽开销却是一样的。

艺术指导

其余时候，图像也许需要更大幅度的修改：更改比例、裁剪甚至更换整张图像。在这种情况下，更改图像通常称作艺术指导。如需查看更多示例，请访问 responsiveimages.org/demos/。

自适应图片

您知道吗？在加载网页所需的字节中，平均有超过 60% 的字节是图像占用的。

在本课程中，您将学习如何在现代网站上处理图像，使图像看起来很棒，并且可以在任何设备上快速加载。

在此过程中，您将掌握各种技能和技术，以顺利地将自适应图片集成到您的开发工作流中。学完本课程后，您将能够开发出能够适应和响应不同视口大小和使用场景的图片。

这是一门通过 Udacity 提供的免费课程

学习课程

标记中的图像

img 元素功能强大，可用于下载、解码并渲染内容。现代浏览器支持多种图片格式。跨设备使用图像与桌面端并无二致，只需做一些微小调整，就能构建美好体验。

摘要

为图像使用相对尺寸，防止它们意外溢出容器。
如果您要根据设备特性（亦称艺术指导）指定不同图像，则使用 picture 元素。
在 img 元素中使用 srcset 和 x 描述符，引导浏览器从不同密度图像中选择、使用最佳的一张。
如果您的页面仅有一两个图像，且这些图像没有在您的网站上的其他地方使用，可考虑使用内联图像以减少文件请求。

为图片使用相对尺寸

在指定图像宽度时，请记得使用相对单位，以防止它们意外溢出视口。例如，width: 50%; 会导致图片宽度为所包含元素的 50%（而不是视口的 50%，也不是实际像素大小的 50%）。

因为 CSS 允许内容溢出容器，因此您可能需要使用 max-width: 100% 来防止图片和其他内容溢出。例如：

img, embed, object, video {
    max-width: 100%;
}

请务必借助 img 元素的 alt 属性提供有意义的描述；这些描述有助于提高您的网站的可访问性，因为它们能提供语境给屏幕阅读器及其他辅助性技术。

针对高 DPI 设备使用 `srcset` 增强 `img`

srcset 属性增强了 img 元素的行为，让您能够轻松地针对不同设备特性提供多个图片文件。类似于 CSS 原生的 image-setCSS 函数，srcset 也允许浏览器根据设备特性选择最佳图像，例如，在 2x 显示屏上使用 2x 图像，将来甚至允许在网络带宽有限时对 2x 设备使用 1x 图像。

<img src="photo.png" srcset="photo@2x.png 2x" ...>

在不支持 srcset 的浏览器上，浏览器只需使用 src 属性指定的默认图像文件。正因如此，无论设备能力如何，一定要始终包含一个在任何设备上都能显示的 1x 图像。如果 srcset 受支持，则会在进行任何请求之前对逗号分隔的图像/条件列表进行解析，并且只会下载和显示最合适的图像。

尽管条件可以包含从像素密度到宽度和高度等各种参数，但目前只有像素密度能够得到很好的支持。为了平衡当前行为与未来功能，请继续在属性中直接提供 2x 图片。

在自适应图片中使用 `picture` 实现艺术指导

若要根据设备特性更改图像（也称为艺术指导），请使用 picture 元素。picture 元素定义了一个声明性解决方案，可根据设备大小、设备分辨率、屏幕方向等不同特性来提供一张图像的多个版本。

注意：picture 元素开始在浏览器中推出。虽然目前还不是每个浏览器都支持，但我们推荐使用它，因为它具备出色的向后兼容性，还可以使用 Picturefill polyfill。如需了解详情，请访问 ResponsiveImages.org 网站。

当图像源存在多种密度，或自适应设计要求在部分类型屏幕上显示不太一样的图像时，请使用 picture 元素。与 video 元素类似，它可以包含多个 source 元素，使得根据媒体查询或图片格式指定不同图片文件成为可能。

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

试试看

在上面的示例中，如果浏览器宽度至少为 800px，则使用 head.jpg 或 head-2x.jpg，具体取决于设备分辨率。如果浏览器的宽度介于 450 像素和 800 像素之间，则使用 head-small.jpg 或 head-small- 2x.jpg，具体取决于设备分辨率。对于小于 450 像素的屏幕宽度以及不支持 picture 元素的向后兼容性，浏览器会改为呈现 img 元素，并且应始终包含该元素。

相对大小的图片

如果不知道图像的最终尺寸，则很难给图像源指定一个密度描述符。对于宽度与浏览器宽度成比例的图像更是如此，图像尺寸是可变的，具体取决于浏览器的尺寸。

提供的每张图像的尺寸可以通过添加宽度描述符和图像元素的大小来指定，而不是提供固定的图像尺寸和密度，从而允许浏览器自动计算有效的像素密度，然后选择下载最佳图像。

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

试试看

在上面的例子中，渲染了一张宽度为视口宽度一半 (sizes="50vw") 的图像，根据浏览器的宽度及其设备像素比，允许浏览器选择正确的图像，而不考虑浏览器窗口有多大。例如，下面的表格显示了浏览器会选择哪张图像：

浏览器宽度	设备像素比	使用的图片	有效分辨率
400px	1	`200.jpg`	1x
400 像素	2	`400.jpg`	2 倍
320 像素	2	`400.jpg`	2.5 倍
600 像素	2	`800.jpg`	2.67 倍
640 像素	3	`1000.jpg`	3.125 倍
1100px	1	`800.png`	1.45x

考虑自适应图像中的断点

在许多情况下，图像尺寸可能会根据网站的布局断点发生变化。例如，在一个小屏幕上，您可能想要图像占满视口的全宽，在大屏幕上，则应只占一小部分。

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

试试看

上面例子中的 sizes 属性使用多个媒体查询来指定图片尺寸。当浏览器宽度大于 600px 时，图像占据视口宽度的 25%；浏览器宽度在 500px 到 600px 之间时，图像占据视口宽度的 50%；如果低于 500px，图像为全宽。

让产品图像可展开

J. 包含可展开产品图片的 Crews 网站 — J. 包含可展开产品图片的 Crew 网站。

客户想要看到他们买的是什么。在零售网站上，用户希望能够查看产品的高分辨率特写，以便更好地了解细节，而研究参与者如果无法查看，会感到失望。

J. Crew 网站提供了一个很好的可点按、可展开图像的例子。Crew 网站。一个消失中的叠层表示图像可点按，点按后提供放大的图像细节。

其他图像技术

压缩图片

压缩图像技术会向所有设备提供高度压缩的 2 倍图像，而无论设备的实际容量是多少。根据图像的类型和压缩级别，图像质量可能看似没有变化，但文件大小却明显减小。

试试看

JavaScript 图片替换

JavaScript 图像替换技术会检查设备功能，然后“做正确的事”。您可以通过 window.devicePixelRatio 确定设备像素比，获取屏幕的宽度和高度，甚至可通过 navigator.connection 或发出假请求来执行某种网络连接嗅探。收集了所有这些信息后，您就可以决定加载哪个图像。

此方法的一大缺陷是，使用 JavaScript 意味着您将延迟加载图像，至少要等到先行解析器结束。这意味着，在 pageload 事件触发之前，图片不会开始下载。此外，浏览器很可能会同时下载 1x 和 2x 图像，导致页面重量增加。

内嵌图片：光栅图片和矢量图片

创建和存储图像有两种全然不同的方式，这将决定您如何以自适应方式部署图像。

光栅图像 - 如照片和其他图像，以单个颜色点网格表示。光栅图像可来自照相机或扫描仪，也可以借助 HTML canvas 元素创建。可使用 PNG、JPEG 和 WebP 之类的格式存储光栅图像。

矢量图像，如徽标和艺术线条，是由一系列的曲线、直线、形状、填充色和渐变色定义的。矢量图片可通过 Adobe Illustrator 或 Inkscape 等程序创建，也可使用 SVG 等矢量格式在代码中手写。

SVG

使用 SVG 可在网页中包含自适应矢量图形。矢量文件格式比光栅文件格式的优势在于，浏览器可以渲染任何大小的矢量图片。矢量格式描述的是图像的几何图形，即该图像是如何通过线条、曲线和颜色等构造的。而光栅格式仅提供与单个颜色点有关的信息，因此，在进行缩放时，浏览器必须猜测如何填充空白。

下面是同一图片的两个版本：左侧是 PNG 图片，右侧是 SVG。SVG 图像在任何尺寸看上去都非常棒，而它旁边的 PNG 图像在显示尺寸较大时会变得模糊。

如果要减少网页发出的文件请求数量，您可以使用 SVG 或数据 URI 格式以内嵌方式对图片进行编码。如果您查看此页面的源代码，就会发现下面的这两个徽标均被声明为内联：Data URI 和 SVG。

SVG 在移动设备和桌面设备上能够得到很好的支持，优化工具可以大大减小 SVG 尺寸。以下两个内联 SVG 徽标看起来完全相同，但一个大约 3KB，另一个仅 2KB：

数据 URI

数据 URI 提供了一种内嵌图片等文件的方式，可以通过将 img 元素的 src 设置为采用 Base64 编码的字符串来实现，格式如下：

<img src="data:image/svg+xml;base64,[data]">

上述 HTML5 徽标代码的开头类似于以下内容：

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

（完整版本长度超过 5000 个字符！）

可使用拖放式工具（例如 jpillora.com/base64-encoder）转换二进制文件，如将图像转换为 Data URI 格式。与 SVG 一样，移动设备和桌面浏览器也很好地支持数据 URI。

在 CSS 中内嵌

Data URI 和 SVG 还可以内嵌在 CSS 中，移动设备和桌面设备均支持此操作。下面是两个外观完全相同的图像，在 CSS 中作为背景图片实现；一个是 Data URI，另一个是 SVG：

内嵌的优缺点

图像的内联代码可能很冗长，特别是 Data URI 格式的图像，那么您为什么要使用它呢？为了减少 HTTP 请求！SVG 和 Data URI 可实现通过一个请求检索整个网页，包括图像、CSS 和 JavaScript。

缺点：

与来自外部 src 的图像相比，在移动设备上 Data URI 格式图像的显示速度要慢得多。
Data URI 会显著增加 HTML 请求的大小。
它们会增加标记和工作流的复杂性。
Data URI 格式的图像比二进制格式的图像大很多（最多大 30%），因此不会减小总下载大小。
Data URI 无法缓存，因此必须为使用它们的每一个页面分别进行下载。
IE 6 和 7 不支持 Data URI，IE8 仅提供有限支持。
对于 HTTP/2，减少资产请求的次数将使优先级下降。

由于所有格式都可以自适应，因此您需要测试哪一种格式效果最佳。使用开发者工具衡量下载文件大小、请求数量和总延迟时间。对于光栅图像，Data URI 有时候非常有用，例如，如果主页只有一两张图像且这些图像没有在其他地方使用，则可使用 Data URI。如果您需要内嵌矢量图片，SVG 是更好的选择。

CSS 中的图像

CSS background 属性是一款强大的工具，用于向元素添加复杂图片、轻松添加多张图片并导致重复显示等。与媒体查询结合使用时，background 属性变得更加强大，能够根据屏幕分辨率、视口大小等有条件地加载图片。

摘要

使用最适合显示屏特性的图像，请考虑屏幕尺寸、设备分辨率和页面布局。
结合使用媒体查询和 min-resolution 及 -webkit-min-device-pixel-ratio 针对高分辨率显示屏更改 CSS 中的 background-image 属性。
除了标记中的 1x 图片之外，您还可以使用 srcset 提供高分辨率图片。
使用 JavaScript 图像替换技术时或为低分辨率设备提供高度压缩的高分辨率图像时，请考虑性能成本。

利用媒体查询有条件地加载图像或提供艺术指导

媒体查询不仅影响页面布局，还可以用于有条件地加载图像，或是基于视口宽度提供艺术指导。

例如，在下面的示例中，对于较小的屏幕只会下载 small.png 并将其应用于内容 div，而对于较大的屏幕，则会将 background-image: url(body.png) 应用于正文，并将 background-image: url(large.png) 应用于内容 div。

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

试试看

使用 image-set 提供高分辨率图像

CSS 中的 image-set() 函数增强了 background 属性的行为，让您能够轻松地针对不同设备特性提供多个图片文件。这样，浏览器就可以根据设备特性选择最佳图像，例如，在 2x 显示屏上使用 2x 图像，或在网络带宽有限时在 2x 的设备上使用 1x 图像。

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

除了加载合适的图片外，浏览器也会相应地调整其大小。换言之，浏览器会假设 2x 图片是 1x 图片的两倍大，因此会将 2x 图片缩小 2 倍，使图片在页面上看起来一样大小。

对 image-set() 的支持仍属于新功能，并且仅支持具有 -webkit 供应商前缀的 Chrome 和 Safari。对于 image-set() 不受支持的情况，应注意加入备用图像，例如：

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

试试看

上例中，会在支持 image-set 的浏览器中加载合适的资产，否则将改为加载 1x 资产。需要特别注意的是，虽然对 image-set() 浏览器的支持较低，但大多数浏览器会获取 1x 素材资源。

利用媒体查询提供高分辨率图像或艺术指导

媒体查询可根据设备像素比创建规则，让您可以针对 2x 和 1x 显示屏分别指定不同的图像。

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome、Firefox 和 Opera 都支持标准的 (min-resolution: 2dppx)，Safari 和 Android 浏览器则均需要不带 dppx 单位的旧版供应商前缀语法。请注意，只有当设备与媒体查询匹配时，系统才会加载这些样式，并且您必须为基本情况指定样式。这样也能够确保当浏览器不支持分辨率特有的媒体查询时，一些内容仍可以得到渲染。

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

试试看

您也可以使用 min-width 语法根据视口大小显示备用图像。此方法的优势在于，如果媒体查询不匹配，则图片不会被下载。例如，只有在浏览器宽度不低于 500 像素时，系统才会下载 bg.png 并将其应用于 body：

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

为图标使用 SVG

为页面添加图标时，请尽可能使用 SVG 图标，在某些情况下，请使用 Unicode 字符。

摘要

为图标使用 SVG 或 unicode，而不是光栅图像。

使用 unicode 替代简单图标

许多字体支持各种各样的 Unicode 字形，可用于替代图片。与图像不同，unicode 字体可以缩放，不管在屏幕上的显示大小如何，显示效果都很好。

除了常见的字符集，unicode 可能包含的符号有箭头 (←)、数学运算符 (√)、几何形状 (★)、控制图片 (▶)、音符 (♬)、希腊字母 (Ω)，甚至象棋子 (♞)。

添加 unicode 字符的方式与指定的字符实体一样：&#XXXX，其中 XXXX 代表 unicode 字符编码。例如：

You're a super &#9733;

您是超级 ★

使用 SVG 替代复杂图标

对于更为复杂的图标需求，SVG 图标通常要轻量、易用，并且可以通过 CSS 设置样式。SVG 的优势比光栅图像多很多：

它们是矢量图形，可以无限缩放。
颜色、阴影、透明度以及动画等 CSS 效果非常简单明了。
SVG 图像能够直接内联到文档中。
它们是有语义的。
它们通过适当的属性提供更好的可访问性。

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

试试看

谨慎使用图标字体

图标字体很流行，使用起来也方便，但与 SVG 图标相比，有一些缺点：

它们是可以无限缩放的矢量图形，但可能会做抗锯齿处理，导致图标不如预期的那样锐利。
有限的 CSS 样式设置。
要实现像素完美定位效果很难，具体取决于行高、字符间距等。
它们没有语义，可能很难与屏幕阅读器或其他辅助性技术结合使用。
除非正确设置了作用域，否则它们可能造成文件很大，却只使用了一小部分可用图标的情况。

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

试试看

免费及收费的图标字体有数百种，包括 Font Awesome、Pictos 和 Glyphicons。

请务必在对图标的需求与额外增加的 HTTP 请求及文件大小之间取得平衡。例如，如果只需要少量图标，或许使用图像或 image sprites 会更合适。

优化图片以提升性能

图像通常占据了下载字节的大部分，通常也占据了网页上大量的视觉空间。因此，优化图片通常可以极大地节省字节数并提升网站性能：浏览器需要下载的字节数越少，对客户端带宽的竞争就越少，浏览器下载和展示所有素材资源的速度就越快。

摘要

不要只是随意地选择图片格式，要了解不同的可用格式，并使用最适合的格式。
在您的工作流程中引入图像优化与压缩工具，减小文件大小。
将常用图像放入 image sprites 中，减少 http 请求数量。
考虑在图像滚动进入视图后才加载图像，以缩短页面初始加载时间，减小初始页面重量。

选择正确的格式

有两种图像类型可以考虑：矢量图像和光栅图像。对于光栅图像，您还需要选择正确的压缩格式，例如：GIF、PNG、JPG。

光栅图像，如相片及其他通过单个的点或像素网格表示的图像。光栅图像通常来自相机或扫描仪，也可以在浏览器中使用 canvas 元素创建。随着图像尺寸的增加，文件大小也相应地增加。如果光栅图像放大超过其初始尺寸，则会变得模糊，因为浏览器需要猜测如何填补缺失的像素。

矢量图片（例如徽标和艺术线条）由一组曲线、直线、形状和填充颜色定义。矢量图像使用 Adobe Illustrator 或 Inkscape 之类的程序创建，并保存为矢量格式，如 SVG。由于矢量图像是建立在简单基元上的，因此，可以进行无损质量的缩放，且文件大小不变。

在选择正确的格式时，务必综合考虑图像的源格式（光栅图像还是矢量图像）及内容（颜色、动画、文本等等）。没有一种格式适用于所有图片类型，每种格式都有自己的优缺点。

在选择正确的格式时，先参考以下指导准则：

摄影图像使用 JPG。
徽标和艺术线条等矢量插画及纯色图形使用 SVG。如果矢量插画不可用，请尝试使用 WebP 或 PNG。
使用 PNG（而非 GIF），因为它支持更多颜色并提供更好的压缩比。
长动画考虑使用 <video>，它能提供更好的图像质量，还允许用户控制回放。

减小文件大小

您可以通过在保存图像后对其进行“后处理”来大幅减小图片文件的大小。图片压缩工具有很多种，包括有损和无损压缩、在线压缩、GUI 压缩和命令行压缩工具。在可能的情况下，最好尝试自动执行图片优化，使其成为工作流的内置功能。

有多种工具可用来对 JPG 和 PNG 文件做进一步的无损压缩，而不会对图像质量造成影响。对于 JPG，请尝试使用 jpegtran 或 jpegoptim（仅适用于 Linux；请使用 --strip-all 选项运行）。对于 PNG，请尝试使用 OptiPNG 或 PNGOUT。

使用图片精灵

CSS 精灵是一项技术，可将许多图片合并到一张“精灵表”图片中。然后，通过指定元素背景图像（精灵表）以及指定用于显示正确部分的位移，可以使用各个图像。

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

试试看

精灵化的好处是，减少了读取多张图像所需的下载数量，而且能保持启用缓存。

考虑延迟加载

在首屏包含许多图像的长页面中，延缓加载能极大提高加载速度，可以按需加载图像，或者在主要内容加载和渲染完成之后加载图像。除了提升性能之外，使用延迟加载还可以打造无限滚动体验。

在创建可无限滚动的网页时，请务必谨慎，因为内容是在可见时加载的，因此搜索引擎可能永远都看不到该内容。此外，用户想查看页脚信息也不可能了，因为总是有新内容被加载。

完全避免使用图像

有时，最好的图像并不真是图像。请尽可能使用浏览器的原生功能实现相同或类似的效果。浏览器可以生成之前需要图像才能生成的视觉效果。这意味着，浏览器不再需要下载单独的图片文件，从而避开糟糕的图片缩放问题。图标可以使用 unicode 或特殊的图标字体来呈现。

将文本放在标记内，而不要嵌入图像内

尽可能让文字只包含文字，而不要嵌入图片中。例如将图像用作标题，或直接在图像中放入电话号码或地址等联系信息会使用户无法复制和粘贴信息；屏幕阅读器也无法识别这些信息，而且这些内容无法自动调整。而应将文本放在标记中，并在必要时使用网页字体来实现所需的样式。

使用 CSS 替换图片

现代浏览器可以使用 CSS 功能创建以前需要图片的样式。例如：您可以使用 background 属性创建复杂的渐变，使用 box-shadow 创建阴影，并使用 border-radius 属性添加圆角。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

请注意，使用这些技巧需要呈现周期性，这一点在移动设备上非常显著。如果过度使用，您会失去您可能已经获得的好处，而且可能会降低性能。

自适应图片

艺术指导

自适应图片

标记中的图像

摘要

为图片使用相对尺寸

针对高 DPI 设备使用 srcset 增强 img

在自适应图片中使用 picture 实现艺术指导

相对大小的图片

考虑自适应图像中的断点

让产品图像可展开

其他图像技术

压缩图片

JavaScript 图片替换

内嵌图片：光栅图片和矢量图片

SVG

数据 URI

在 CSS 中内嵌

内嵌的优缺点

CSS 中的图像

摘要

利用媒体查询有条件地加载图像或提供艺术指导

使用 image-set 提供高分辨率图像

利用媒体查询提供高分辨率图像或艺术指导

为图标使用 SVG

摘要

使用 unicode 替代简单图标

使用 SVG 替代复杂图标

谨慎使用图标字体

优化图片以提升性能

摘要

选择正确的格式

减小文件大小

使用图片精灵

考虑延迟加载

完全避免使用图像

将文本放在标记内，而不要嵌入图像内

使用 CSS 替换图片

针对高 DPI 设备使用 `srcset` 增强 `img`

在自适应图片中使用 `picture` 实现艺术指导