此页面由 Cloud Translation API 翻译。

自适应图片

一张图片胜过千言万语，图片也是每个网页不可或缺的一部分。但它们往往也是下载的字节的大部分。借助响应性网页设计，我们的布局不仅可以根据设备特性而变化，图片也可以。

Pete LePage

自适应设计意味着，不仅我们的布局能根据设备而变化，但内容也可能发生变化例如，在高分辨率 (2x) 显示屏，高分辨率图形确保清晰度。图片当浏览器宽度为 800px 时，使用 50% 宽度可能没问题，在较窄的手机上占用过多空间，并且需要相同的带宽开销以适应较小的屏幕

艺术指导

其他时候，可能需要大幅度地更改图像：比例、剪裁甚至替换整张图片。在此示例中更换图片通常称为艺术指导请参阅如需了解详情，请访问 responsiveimages.org/demos/ 示例。

自适应图片

您知道吗？在加载网页所需的平均字节数中，图片占了超过 60%。

在本课程中，您将学习如何在现代网络上处理图片，确保图片在任何设备上都能快速呈现，

在这个过程中，您将学到一系列技能和技巧，以便顺利将自适应图片集成到您的开发工作流中。截止日期您将使用能够根据自身情况进行调整和响应的图片，不同的视口大小和使用场景

这是 Udacity 提供的免费课程

学习课程

标记中的图片

img 元素功能强大，可用于下载、解码并渲染内容，而现代浏览器支持多种图片格式。包括可跨设备显示的图片与桌面设备上的图片并无二致需要进行一些细微调整才能打造良好的体验。

摘要

为图片使用相对尺寸，以防止图片意外溢出容器。
如果您想根据具体情况指定不同的图片，请使用 picture 元素。（又称为艺术指导）。
在 img 元素中使用 srcset 和 x 描述符，当选择不同密度时，浏览器会确定要使用的最佳图像。
如果您的网页上只有 1-2 张图片，且这些图片未用于您的网站，不妨考虑使用内嵌图片来减少文件请求。

为图片使用相对尺寸

在指定图片宽度时请务必使用相对单位，以防出现相对单位避免意外溢出视口例如，width: 50%; 会导致将图片宽度设为所包含元素的 50%（而不是视口或实际像素大小的 50%）。

由于 CSS 允许内容溢出容器，因此您可能需要使用 max- 宽度：100%，以防止图片和其他内容溢出。例如：

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

请务必通过 img 上的 alt 属性提供有意义的说明元素；通过为屏幕提供上下文信息，使您的网站更易于访问阅读器和其他辅助技术。

针对高 DPI 设备，使用 `srcset` 美化 `img`

srcset 属性增强了 img 元素，以便您轻松提供多个图片文件针对不同设备特性进行优化。与image-set类似 CSS 函数是 CSS 的原生内容，srcset 可让浏览器选择根据设备特性来调整图片，例如使用在 2 倍显示屏上投放 2x 图片，并且将来可能会在带宽有限的情况下获得 2x 设备。

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

在不支持 srcset 的浏览器上，浏览器会直接使用默认值使用 src 属性指定的图片文件。因此，务必要始终包含可在任何设备上显示的 1x 图片，功能。如果支持 srcset，则使用以逗号分隔的 image/conditions 格式会在发出任何请求之前进行解析，系统则会下载并显示相应的图片

这些条件可能包括像素密度、宽度等各种因素但目前只有像素密度能够得到很好的支持。平衡当前费用与未来功能相关的行为，请继续在属性。

在自适应图片中使用 `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，具体取决于设备分辨率。如果则使用 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")，具体取决于浏览器的宽度和设备像素允许浏览器选择正确的图片，浏览器窗口的大小。例如，下表显示了浏览器会选择：

浏览器宽度	设备像素比	使用的图片	有效解决方案
400 像素	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 倍
1100 像素	1	`800.png`	1.45 倍

考虑自适应图片中的断点

在许多情况下，图片尺寸可能会根据网站的布局而发生变化断点。例如，在小屏幕上，您可能希望图片跨越视口的全宽，而在较大的屏幕上，所占的比例较小。

<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%；在 500 像素之间时 600px，则图片占视口宽度的 50%；低于 500 像素时为全角。

使产品图片可展开

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

客户希望了解他们正在购买的商品。在零售网站上，用户期望可以查看产品的高分辨率特写，以便更清楚地了解以及研究参与者会因为做不到而感到沮丧

J.工作人员网站。消失叠加层表示图片可点按，清晰可见的细节

其他图像技术

压缩图片

通过压缩图像技术向所有设备提供高度压缩的 2 倍图像，设备的功能。根据图片类型和压缩后，图片质量可能不会变化，但文件大小会有所减少显著增加。

试试看

JavaScript 图片替换

JavaScript 图片替换功能会检查设备的功能，没错。”您可以通过以下方法确定设备像素比 window.devicePixelRatio，获取屏幕宽度和高度，甚至可能通过 navigator.connection 嗅探某些网络连接，或发出假请求。收集完所有这些信息后，您可以决定图片。

这种方法的一大缺点是，使用 JavaScript 意味着至少要等到先行解析器完成之后再加载图片。这个这意味着，图片要到 pageload 事件之后才会开始下载触发。此外，浏览器很可能会同时下载 1x 和 2x 图片，导致页面重量增加。

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

创建和存储映像有两种完全不同的方法，这会影响您以自适应方式部署图片的方式。

光栅图片，例如照片和其他图片以单个颜色点网格表示系统可能会显示光栅图像，也可以采用 HTML 画布元素创建。广告格式 PNG、JPEG 和 WebP 等用于存储光栅图像。

矢量图像（例如徽标和艺术线条）是指曲线、线条、形状、填充颜色和渐变效果。您可以创建矢量图像或者使用 Adobe Illustrator 或 Inkscape 等程序编写代码，例如 SVG 等矢量格式。

SVG

通过 SVG，可以在网页中添加自适应矢量图形。通过矢量文件格式比光栅文件格式的优势在于可以渲染任意尺寸的矢量图像。矢量格式描述的是了解它是如何通过线条、曲线和颜色等构造的。另一方面，光栅格式只包含关于单个点的信息因此在缩放时，浏览器必须猜测如何填补空白。

下面是同一图片的两个版本：左边是 PNG 图像，SVG 图像在右边。SVG 在任何尺寸下看起来都很棒，而其旁边的 PNG 在较大的显示屏尺寸下看起来会比较模糊。

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

SVG 在移动设备和桌面设备上获得很好的支持，和优化工具可以显著减小 SVG 尺寸。以下两个内嵌 SVG 徽标的外观完全相同，但一个大约 3KB，另一个只有 2KB：

数据 URI

Data URI 提供了一种添加文件（例如图片）的方法，通过设置 img 元素的 src（使用以下格式：

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

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

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

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

拖动“N”拖放工具，例如 jpillora.com/base64-encoder：可用于将二进制文件（例如图片）转换为数据 URI。与 SVG 一样 Data URI 在移动设备上得到了很好的支持，桌面浏览器。

在 CSS 中内嵌

Data URI 和 SVG 还可以内联到 CSS 中，这适用于同时适用于移动设备和桌面设备下面是两张看起来完全相同的图片， CSS 中的背景图片；一个 Data URI 和一个 SVG：

内联专业人士和缺点

图片的内嵌代码可能很冗长，尤其是 Data URI 格式的图片，因此你想使用它吗？为了减少 HTTP 请求！SVG 和 Data URI 可以检索整个网页，包括图片、CSS 和 JavaScript。发出一个请求

缺点：

在移动设备上，Data URI 的速度可能要慢很多比来自外部 src 的图片更能在移动设备上显示。
Data URI 会显著增加 HTML 请求的大小。
它们会增加标记和工作流程的复杂性。
Data URI 格式明显大于二进制格式（最高为 30%），并且因此不会减少总下载大小
Data URI 无法缓存，因此必须为每个使用它们的页面下载数据 URI。
IE 6 和 7 不支持这些功能，IE8 支持不完整。
使用 HTTP/2 时，减少资源请求的数量会降低其优先级。

由于所有格式都可以自适应，因此您需要测试哪一种格式效果最佳。使用开发者账号用于衡量下载文件大小、请求数和延迟时间对于光栅图像，Data URI 有时很有用，例如。如果您但 SVG 是更好的选择。

CSS 中的图片

CSS background 属性是用于添加复杂图片的强大工具这样可以轻松添加多个图片并导致它们重复等等。与媒体查询结合使用时，background 属性变为功能更加强大，可根据屏幕有条件地加载图片例如分辨率、视口尺寸等

摘要

使用最符合显示屏特征的图片，考虑屏幕尺寸、设备分辨率和页面布局。
针对高 DPI 显示屏更改 CSS 中的 background-image 属性：使用 min-resolution 和 -webkit-min-device-pixel-ratio 实现媒体查询。
除了标记。
考虑使用 JavaScript 图片替换时的性能成本或提供高度压缩的高分辨率图像时，低分辨率设备

使用媒体查询有条件地加载图片或进行艺术指导

媒体查询不仅会影响网页布局，您还可以使用它们根据视口有条件地加载图片或提供艺术指导宽度。

例如，在下面的示例中，在较小的屏幕上，只有 small.png 已下载并应用于内容“div”，在大屏设备上也能使用对正文应用 background-image: url(body.png)，对内容 div 应用 background-image: url(large.png)。

.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 属性的行为，从而轻松为不同设备提供多个图片文件特征。这样，浏览器就可以根据设备的特征，例如在 2 倍显示屏上使用 2 倍图像；或者在网络带宽有限时，在 2 倍分辨率的设备上展示 1 倍图像。

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

除了加载正确的图片外，浏览器还会缩放图片。换句话说，浏览器会假设 2x 的图片是将 2x 的图片缩小至原来的 2 倍，让该图片在网页中显得与实际尺寸相同

对 image-set() 的支持仍是一项新功能，目前仅在 Chrome 和带有 -webkit 供应商前缀的 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 单位）。请注意，这些样式仅在 device 与媒体查询相匹配，因此您必须为基本 case 指定样式。这样还可以确保当浏览器加载网页时不支持特定于分辨率的媒体查询。

.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 语法根据视口大小这种方法的优势在于，图片不会如果媒体查询不匹配，则会下载该查询。例如，bg.png 只是当浏览器宽度不低于 500 像素时，已下载并应用于 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 相比，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 太棒了！ Pictos 和字形图标。

请务必根据请求数量对图标的需求例如，如果您只需要少量图标，最好使用图片或图片精灵来制作图片。

优化图片以提升性能

图像通常占据了下载的字节的大部分，也经常会占据占据了网页上大量视觉空间因此，优化图片通常可以节省大量字节，对网站的改进：浏览器必须下载的字节数越少、对客户端带宽的竞争越小，浏览器可以下载并显示所有素材资源。

摘要

不要只是随意地选择图片格式，还要了解不同的格式可用，并使用最适合的格式。
在您的工作流程中纳入图片优化和压缩工具，文件大小。
通过将常用图片放入图片拼合图片
要缩短初始网页加载时间并减小初始网页加载大小，可以考虑仅在图片滚动到视野范围内后才加载图片。

选择正确的格式

您需要考虑以下两种类型的映像：矢量图像和光栅图片。对于光栅图片，您还需要选择正确的压缩格式，例如：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 坐姿 amet augue eu magna scelerisque porta ut ut dolor.Nullam placerat egestas Nisl sed sollicitudinFusce 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` 进行艺术指导