如何用 srcset 属性让移动端加载更小的图片
通过在 img 标签中使用 srcset 属性，可以让浏览器根据屏幕宽度自动选择合适的图片文件，从而减少移动端用户的流量消耗。
识别需要优化的图片资源
在网站中，如果发现移动端访问时图片加载缓慢或占用流量过大，通常是因为使用了与屏幕尺寸不匹配的大尺寸图片。例如，一张在桌面端显示的宽幅风景图，在手机窄屏上可能只占很小一部分区域，却依然下载了完整的高分辨率文件。这种情况下，图片的显示尺寸与实际文件大小之间存在巨大差异，导致不必要的带宽浪费。通过检查网页源代码中的 img 标签，可以确认当前是否只指定了一个固定的 src 地址，而没有提供针对不同屏幕尺寸的备选方案。如果发现所有图片都只依赖单一源文件，就说明存在优化空间。
具体排查时，可以打开浏览器的开发者工具，切换到网络面板，查看移动端视图下加载的图片文件大小。如果发现某些图片的文件体积明显大于其在屏幕上实际显示的尺寸，那么这些图片就是优化的目标。例如，一张在手机上只显示 200 像素宽的图片，如果源文件是 800 像素宽，那么它就包含了大量用户无法看到的冗余数据。此时，就需要利用 HTML 的响应式图片技术来解决这个问题。通过提供多个不同尺寸的图片源，并告诉浏览器根据屏幕情况选择最合适的一个，可以显著降低移动端的流量消耗。
配置 srcset 属性提供多尺寸源
为了解决上述问题，可以在 img 标签中添加 srcset 属性，列出不同尺寸的图片文件及其对应的宽度值。srcset 属性的值由逗号分隔的条目组成，每个条目包含图片文件名、一个空格以及该图片的固有宽度（单位为 w）。例如，对于一张在移动端显示的图片，可以提供两个版本：一个是 480 像素宽的版本，另一个是 800 像素宽的版本。这样，浏览器就能根据屏幕宽度选择最接近的图片。需要注意的是，这里的宽度单位是 w，而不是 px，它表示图片文件的实际像素宽度，可以通过查看图片属性获取。
在配置 srcset 时，还需要配合使用 sizes 属性，它告诉浏览器在特定屏幕宽度下图片将占据多大的空间。sizes 属性的值也是逗号分隔的列表，每个条目包含一个媒体条件（如屏幕宽度）和一个宽度值。例如，当屏幕宽度小于等于 600 像素时，图片占据 480 像素；否则占据 800 像素。浏览器会根据当前屏幕宽度匹配第一个为真的媒体条件，然后根据对应的宽度值，在 srcset 列表中查找最合适的图片文件。如果找不到完全匹配的尺寸，浏览器会选择第一个比该宽度值大的图片并按比例缩小。这种机制确保了移动端用户只下载他们真正需要的图片数据。
验证图片加载结果是否正确
配置完成后，需要验证浏览器是否按照预期加载了较小的图片文件。在桌面浏览器的开发者工具中，可以通过调整窗口宽度来模拟移动端环境。当将窗口宽度缩小到 480 像素以下时，检查网络面板中加载的图片文件是否变成了 480w 版本。如果文件大小明显减小，说明配置成功。如果仍然加载的是大尺寸文件，可能是浏览器不支持 srcset 属性，或者 sizes 属性的配置导致匹配错误。此时，可以尝试简化 sizes 属性，或者检查媒体条件的顺序是否正确。
在移动设备上验证时，可以使用 Chrome 或 Firefox 的远程调试功能，将手机连接到电脑，并在开发者工具中查看移动端的网络请求。同样地，检查加载的图片文件是否符合预期。如果发现浏览器加载了错误的图片，可能是因为 srcset 中的宽度值与实际文件尺寸不符，或者 sizes 属性中的宽度值与图片显示的 CSS 宽度不一致。建议在配置时，确保 srcset 中的宽度值与图片文件的实际像素尺寸一致，并且 sizes 属性中的宽度值与图片在页面中的显示尺寸一致。通过这种方式，可以确保移动端用户获得最佳的加载体验。
处理不支持响应式图片的旧浏览器
虽然 srcset 和 sizes 属性在现代浏览器中得到了广泛支持，但仍然存在一些旧版本的浏览器无法识别这些属性。对于这些浏览器，它们会忽略 srcset 和 sizes，转而直接加载 src 属性中指定的默认图片。因此，在配置响应式图片时，必须保留一个标准的 src 属性，作为旧浏览器的后备方案。例如，可以指定一个中等尺寸的图片作为默认图片，确保在旧浏览器中也能正常显示。这样，既能利用新特性提升性能，又能保证兼容性。
需要注意的是，旧浏览器在加载默认图片时，可能会忽略移动端的屏幕宽度，直接下载大尺寸图片。这可能会导致移动端用户仍然面临流量浪费的问题。因此，对于移动端网站，建议优先使用支持响应式图片的现代浏览器。如果必须支持旧浏览器，可以考虑使用 JavaScript 来检测浏览器能力，并动态调整图片的加载策略。不过，这种方法会增加页面的复杂性和加载时间。因此，在大多数情况下，直接依赖 HTML 的响应式图片特性，配合适当的默认图片，是解决兼容性问题的最佳方式。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。