使用 srcset 自动选择合适的图片大小。
根据 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:两只十周大的虎斑猫。](https://web.developers.google.cn/static/articles/use-srcset-to-automatically-choose-the-right-image/image/little-puss-lias-ten-w-3c69ee66b6ca5.jpg?authuser=8&hl=hu)
![Little Puss and Lias:两只十周大的虎斑猫。](https://web.developers.google.cn/static/articles/use-srcset-to-automatically-choose-the-right-image/image/little-puss-lias-ten-w-1dffb2ed3ac31.jpg?authuser=8&hl=hu)
第一张图片的文件大小要大得多,因为它在保存时的尺寸远大于显示大小。这两张图片均以 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
的实际运用。如果您使用的是笔记本电脑或台式机,请更改浏览器窗口大小,然后重新打开此页面。然后使用浏览器工具的“网络”面板查看所用的图片。
(您需要在无痕式窗口中或无痕浏览的窗口中执行此操作,否则系统会缓存原始图片文件)。
如何创建多种图片尺寸?
您需要为要与 srcset
搭配使用的每张图片提供多种尺寸选项。
对于一次性图片(例如主打图片),您可以手动保存不同尺寸的图片。如果您有大量图片(例如产品照片),则需要自动执行。为此,您可以采用两种方法。
在构建流程中纳入映像处理
在构建流程中,您可以添加步骤来创建不同大小的映像版本。如需了解详情,请参阅“使用 Imagemin 压缩图片”。
使用图片服务
映像创建和交付可以使用 Cloudinary 等商业服务或您自己安装和运行的 Thumbor 等开源服务自动执行。
您上传高分辨率图片后,图片服务会根据网址参数自动创建并传送不同的图片格式和大小。例如,在 Cloudinary 上打开这张示例图片,然后尝试更改网址栏中的 w
值或文件扩展名。
图片服务还具有更高级的功能,例如能够针对不同大小的图片自动“智能剪裁”,并自动将 WebP 图片传送至支持相应格式(而不是 JPEG)的浏览器,而无需更改文件扩展名。
如果图片在不同尺寸下看起来不合适,该怎么办?
在这种情况下,您需要使用 <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 中查看实际操作。
如何支持浏览器?
全球超过 90% 的浏览器支持 srcset
和 sizes
。
如果浏览器不支持 srcset
或 sizes
,就会回退到仅使用 src
属性。
这会使 srcset
和 sizes
实现出色的渐进式增强功能!
了解详情
请查看 web.dev 的“优化图片”部分,更深入地了解图片优化。如需获得指导性更强的体验,请考虑尝试 Udacity 提供的免费“自适应图片”课程。