此页面由 Cloud Translation API 翻译。

有关网站性能的重要技巧

使用 srcset 自动选择合适的图片大小。

Sam Dutton

根据 HTTP Archive 数据，一个典型的移动网页的重量会超过 2.6 MB，其中超过三分之二的重量是图片。这是一个很好的优化机会！

摘要

请勿保存大于显示尺寸的图片。
为每张图片保存多种尺寸，并使用 srcset 属性让浏览器选择最小的图片。w 值会告知浏览器每个版本的宽度：

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

请保存大小合适的图片

通过使用尺寸与显示大小相匹配的图片，您可以加快网站加载速度并减少数据需求。也就是说，在保存图片时请为图片指定合适的宽度和高度。

请看下面的图片。

两者看起来几乎完全相同，但其中一个的文件大小是另一个的 10 倍以上。

Little Puss and Lias：两只十周大的虎斑猫。 — 保存宽度为 1000 像素，文件大小为 184 KB

第一张图片的文件大小要大得多，因为它在保存时的尺寸远大于显示大小。这两张图片均以 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 会向浏览器提供有关每个图片文件的已保存宽度的信息。它并不指定显示图片的尺寸，您仍然需要使用 CSS！

下图所示为 srcset 的实际运用。如果您使用的是笔记本电脑或台式机，请更改浏览器窗口大小，然后重新打开此页面。然后使用浏览器工具的“网络”面板查看所用的图片。（您需要在无痕式窗口中或无痕浏览的窗口中执行此操作，否则系统会缓存原始图片文件）。

利亚斯和小猫：两只十周大的灰色虎斑猫

如何创建多种图片尺寸？

您需要为要与 srcset 搭配使用的每张图片提供多种尺寸选项。

对于一次性图片（例如主打图片），您可以手动保存不同尺寸的图片。如果您有大量图片（例如产品照片），则需要自动执行。为此，您可以采用两种方法。

在构建流程中纳入映像处理

在构建流程中，您可以添加步骤来创建不同大小的映像版本。如需了解详情，请参阅“使用 Imagemin 压缩图片”。

使用图片服务

映像创建和交付可以使用 Cloudinary 等商业服务或您自己安装和运行的 Thumbor 等开源服务自动执行。

您上传高分辨率图片后，图片服务会根据网址参数自动创建并传送不同的图片格式和大小。例如，在 Cloudinary 上打开这张示例图片，然后尝试更改网址栏中的 w 值或文件扩展名。

图片服务还具有更高级的功能，例如能够针对不同大小的图片自动“智能剪裁”，并自动将 WebP 图片传送至支持相应格式（而不是 JPEG）的浏览器，而无需更改文件扩展名。

注意：您可以使用浏览器工具查看提供的格式。对于上面的图片网址，系统会自动将 WebP 文件传送到支持 WebP 的浏览器，而不会更改 .jpg 文件扩展名。

Chrome 开发者工具显示 Cloudinary 提供的文件的 WebP content-type 标头

如果图片在不同尺寸下看起来不合适，该怎么办？

在这种情况下，您需要使用 <picture> 元素来实现“艺术指导”：提供不同的图片或不同尺寸的图片剪裁。如需了解详情，请参阅艺术指导 Codelab。

像素密度怎么样？

高端设备具有更小（更密集）的物理像素。例如，高端手机每行像素的像素数量可能是较便宜的设备的两到三倍。

这可能会影响保存图片所需的大小。我们在这里不作详细介绍，但您可以从“使用密度描述符” 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 和指定多个槽宽度 Codelab 中查看实际操作。

注意：sizes 会向浏览器提供有关图片元素的显示宽度的信息。与 srcset 一样，它没有指定显示图片的尺寸，为此，您需要使用 CSS。

如何支持浏览器？

全球超过 90% 的浏览器支持 srcset 和 sizes。

如果浏览器不支持 srcset 或 sizes，就会回退到仅使用 src 属性。

这会使 srcset 和 sizes 实现出色的渐进式增强功能！

了解详情

请查看 web.dev 的“优化图片”部分，更深入地了解图片优化。如需获得指导性更强的体验，请考虑尝试 Udacity 提供的免费“自适应图片”课程。