使用 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 显示屏）呢？
帮助浏览器选择合适的图片尺寸
如果您可以提供每张图片的不同尺寸，然后让浏览器为设备和显示尺寸选择最佳尺寸，那不是很好吗？不幸的是，在确定哪张图片是最佳图片时，存在一个 两难困境。浏览器应使用尽可能小的图片，但它无法在不下载图片进行检查的情况下知道图片的宽度。
这就是 srcset 派上用场的地方。您可以保存不同尺寸的图片，然后告诉浏览器每个版本的宽度
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
w 值显示每张图片的宽度（以像素为单位）。例如，small.jpg 500w 告诉浏览器 small.jpg 的宽度为 500 像素。这使浏览器能够根据屏幕类型和视口大小选择尽可能小的图片，而无需下载图片来检查其尺寸。
您可以在下面的图片中看到 srcset 的实际效果。如果您使用的是笔记本电脑或台式计算机，请更改浏览器窗口大小并重新打开此页面。然后使用浏览器工具的网络面板检查使用了哪张图片。（您需要在隐身或私密窗口中执行此操作，否则原始图片文件将被缓存。）
如何创建多种图片尺寸？
您需要为要与 srcset 一起使用的每张图片提供多种尺寸。
对于一次性图片（如焦点图），您可以手动保存不同的尺寸。如果您有很多图片（如产品照片），则需要进行自动化。为此，有两种方法。
将图片处理融入到您的构建流程中
作为构建流程的一部分，您可以添加步骤来创建不同尺寸的图片版本。请参阅 “使用 Imagemin 压缩图片” 了解更多信息。
使用图片服务
图片创建和交付可以使用商业服务（如 Cloudinary）或开源等效服务（如您自己安装和运行的 Thumbor）实现自动化。
您上传高分辨率图片，图片服务会根据 URL 参数自动创建和交付不同的图片格式和尺寸。例如，打开 Cloudinary 上的此示例图片，并尝试更改 URL 栏中的 w 值或文件扩展名。
图片服务还具有更高级的功能，例如能够为不同的图片尺寸自动执行“智能裁剪”，并自动将 WebP 图片交付给支持该格式的浏览器，而不是 JPEG，而无需更改文件扩展名。
如果图片在不同尺寸下看起来不合适怎么办？
在这种情况下，您需要使用 <picture> 元素进行“美术指导”：在不同尺寸下提供不同的图片或图片裁剪。要了解更多信息，请查看 “美术指导” 实验手册。
像素密度呢？
高端设备具有更小（更密集）的物理像素。例如，高端手机每行像素数可能是廉价设备的 2 倍或 3 倍。
这可能会影响您需要保存的图片尺寸。我们在此处不赘述细节，但您可以从 “使用密度描述符” 实验手册中了解更多信息。
图片显示尺寸呢？
您可以使用 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 和 “指定多个插槽宽度” 实验手册中看到这一点。
浏览器支持情况如何？
srcset 和 sizes 在全球超过 90% 的浏览器中得到支持。
如果浏览器不支持 srcset 或 sizes，它将回退到仅使用 src 属性。
这使得 srcset 和 sizes 成为出色的渐进增强功能！
了解更多信息
查看 web.dev 的 “优化您的图片” 部分，以更深入地了解图片优化。为了获得更具指导性的体验，请考虑尝试 Udacity 提供的免费 “响应式图片” 课程。