Wordpress中srcset与size在Windows浏览器加载过小图片问题求助

在某水族植物网站中，Chrome浏览器下分类列表的图片实际渲染尺寸为545px，按预期应加载600px规格的图片，但实际却加载了260px的小图，该问题仅在Chrome中出现，其他浏览器可正常加载600px图片。

以下是具体排查思路：

• 检查图片的srcset/sizes属性：Chrome对srcset的优先级处理可能和其他浏览器存在差异。直接在Chrome DevTools的Elements面板查看img标签的srcset属性，确认是否同时包含260px和600px的资源定义，再检查sizes属性的媒体查询规则，看当前视口下是否错误匹配到了260px的资源。
• 验证视口与响应式断点：确认Chrome的当前视口宽度是否触发了错误的响应式图片规则。可以通过DevTools的Device Toolbar切换不同视口测试，同时在Network面板观察图片的加载规格变化；另外检查是否开启了浏览器缩放，缩放可能导致视口计算异常。
• 排查缓存与浏览器特性：Chrome可能因缓存加载了旧的小图资源，可在Network面板勾选「Disable cache」后刷新页面重试。同时检查是否开启了Chrome的「数据节省模式」，这类功能会自动降级图片尺寸以节省流量。
• 测试User-Agent影响：网站可能根据请求的User-Agent返回不同尺寸图片。在DevTools的Network Conditions中修改Chrome的User-Agent为正常加载600px图片的浏览器标识，重新加载页面，看是否能加载正确尺寸的图片，以此验证服务器端是否针对Chrome UA做了特殊处理。
• 跟踪JavaScript动态修改逻辑：页面可能通过JS动态修改图片src属性。在DevTools的Sources面板设置断点，跟踪图片地址的修改过程，排查是否有代码在Chrome环境下错误替换为260px的图片链接。
• 检查设备像素比（DPR）差异：Chrome对DPR的计算可能和其他浏览器不同。在DevTools控制台执行window.devicePixelRatio查看当前值，对比正常浏览器的DPR，同时检查图片srcset中是否基于DPR定义了不同尺寸规则（如260w 1x, 600w 2x），看是否因DPR匹配错误导致加载小图。

内容的提问来源于stack exchange，提问作者Martin Brandel