
srcset列出可选图片,浏览器结合候选描述、显示尺寸、设备像素密度等条件选择资源。候选越多并不自动越清晰或更快;需要确认每个文件真实存在、尺寸描述准确,并与页面的实际布局相配。
先区分宽度描述和像素密度描述
查看输出使用的是640w这类宽度描述,还是1x、2x这类密度描述。两种写法表达不同条件,不能把文件体积填进宽度描述,也不要随意混合不兼容的候选形式。相同网址重复列出多个宽度,并不能创造不存在的清晰度。
从实际使用位置反推候选
列表小图、正文大图和全宽主视觉所需尺寸不同。记录各断点的显示宽度及常见高密度屏幕需求,再检查WordPress生成尺寸是否覆盖合理范围。只生成超大图会让手机多下载数据,只有很小图片则可能在大屏模糊。

确认候选文件属于同一张内容
用于尺寸切换的候选应保持相同主体与适当的宽高关系。裁切内容明显不同属于艺术指导问题,不能简单当作同图不同尺寸混进列表。需要改变构图时应考虑picture等合适方式,并核对编辑器和主题真实支持。
查看currentSrc和实际下载
网络面板和图片的currentSrc可以帮助确认浏览器选了什么,但应在代表性宽度及新的加载条件下观察。浏览器可能复用已经下载的大图,不会每次缩窗都重新下载小图。检查清晰度、传输体积与布局,不用一次截图猜测全部选择行为。
关键区别

srcset:提供可用候选;不直接等于CSS宽度。
显示尺寸:由页面布局决定;需要与sizes配合。
currentSrc:当前选择的地址;受浏览器条件影响。
怎样确认处理到位
候选地址可访问且描述正确,典型屏宽下图片清晰、体积合理,浏览器实际选择能够依据布局和设备条件解释。
容易误判的边界
本文讨论同图尺寸候选选择,与缩略图裁掉主体的构图问题分开;浏览器具体选择并非作者可强制保证的固定表。
