使用 srcset 自动选择合适的图片尺寸。
根据 HTTP Archive 的数据，典型的移动网页大小超过 2.6 MB，其中超过三分之二是图片。这正是优化的好机会！
摘要
- 请勿保存大于其显示尺寸的图片。
- 为每张图片保存多种尺寸，并使用
srcset属性，以便浏览器选择最小的尺寸。w值会告知浏览器每个版本的宽度：
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
保存大小合适的图片
通过使用尺寸与显示尺寸相匹配的图片，您可以提高网站速度并减少数据用量。换句话说，在保存图片时，请确保图片具有合适的宽度和高度。
请看下面的图片。
它们看起来几乎完全相同，但其中一个的文件大小是另一个的 10 倍以上。
第一张图片的文件大小要大得多，因为其保存的尺寸远大于显示尺寸。两张图片的宽度都固定为 300 像素，因此使用以相同尺寸保存的图片是合理的。
对于固定宽度，请使用保存的图片，其尺寸与显示屏尺寸相同。
但是，如果显示屏尺寸各不相同，该怎么办？
在多设备环境中，图片并不总是以单一的固定尺寸显示。
图片元素可能具有百分比宽度，或者属于自适应布局，其中图片显示大小会随屏幕尺寸而变化。
…那么对于需要大量像素的设备（例如 Retina 显示屏）呢？
帮助浏览器选择合适的图片大小
如果能以不同尺寸提供每张图片，然后让浏览器选择最适合设备和显示尺寸的尺寸，岂非美事一桩！遗憾的是，在确定哪张图片效果最好时，我们面临着一个catch-22。浏览器应使用尽可能小的图片，但它无法在下载图片进行检查之前知道图片的宽度。
这时，srcset 就派上用场了。您可以保存不同尺寸的图片，然后告知浏览器每个版本的宽度：
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
w 值显示了每张图片的宽度（以像素为单位）。例如，small.jpg 500w 会告知浏览器 small.jpg 的宽度为 500 像素。这样一来，浏览器便可根据屏幕类型和视口大小选择尽可能小的图片，而无需下载图片来检查其大小。
您可以在下图查看 srcset 的实际效果。如果您使用的是笔记本电脑或台式电脑，请更改浏览器窗口大小，然后重新打开此页面。
然后，使用浏览器工具的“Network”（网络）面板检查使用了哪个图片。
（您需要在无痕式窗口或私密窗口中执行此操作，否则原始图片文件会被缓存。）
如何创建多种尺寸的图片？
您需要为要与 srcset 搭配使用的每张图片提供多种尺寸。
对于主打图片等一次性图片，您可以手动保存不同尺寸的图片。如果您有大量图片（例如产品照片），则需要进行自动化处理。 为此，您可以采用以下两种方法。
在构建流程中加入图片处理
在构建过程中，您可以添加一些步骤来创建不同尺寸的图片版本。如需了解详情，请参阅“使用 Imagemin 压缩图片”。
使用图片服务
您可以使用 Cloudinary 等商业服务或 Thumbor 等自行安装和运行的开源等效服务来自动创建和交付图片。
您上传高分辨率图片后，图片服务会根据网址参数自动创建并提供不同格式和尺寸的图片。举例来说，您可以在 Cloudinary 上打开此示例图片，然后尝试更改网址栏中的 w 值或文件扩展名。
图片服务还具有更高级的功能，例如能够针对不同的图片尺寸自动进行“智能裁剪”，并自动向支持 WebP 格式的浏览器提供 WebP 图片，而不是 JPEG 图片，而无需更改文件扩展名。
如果图片在不同尺寸下显示效果不佳，该怎么办？
在这种情况下，您需要使用 <picture> 元素进行“艺术指导”：在不同尺寸下提供不同的图片或图片剪裁。如需了解详情，请参阅“艺术指导”Codelab。
像素密度呢？
高端设备的实体像素更小（密度更高）。例如，高端手机每行像素数可能是低端设备的 2 到 3 倍。
这会影响您保存图片所需的大小。我们不会在此处详细介绍，但您可以从“使用密度描述符”Codelab 中了解更多信息。
图片显示尺寸如何？
您可以使用 sizes 让 srcset 的效果更出色。
如果没有它，浏览器会在从 srcset 中选择图片时使用视口的完整宽度。sizes 属性会告知浏览器图片元素的显示宽度，以便浏览器在进行任何布局计算之前，选择尽可能小的图片文件。
在下面的示例中，sizes="50vw" 会告知浏览器此图片将以视口宽度的 50% 显示。
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
您可以在 simpl.info/sizes 和 "Specifying multiple slot widths" Codelab 中查看实际效果。
浏览器支持方面呢？
srcset 和 sizes 在全球范围内受到超过 90% 的浏览器的支持。
如果浏览器不支持 srcset 或 sizes，则会回退到仅使用 src 属性。
这使得 srcset 和 sizes 成为出色的渐进式增强功能！
了解详情
如需深入了解图片优化，请参阅 web.dev 的“优化图片”部分。如需获得更具指导性的体验，不妨考虑试学 Udacity 提供的免费“自适应图片”课程。