img标签srcset属性视口缩小时不切换小图片问题如何解决

你观察到的现象是浏览器的标准设计：srcset + sizes 组合的设计目标是在不浪费带宽的前提下提供适配当前视口清晰度的图片。当浏览器已经加载了更大尺寸的高分辨率图片时，即便视口缩小，也不会降级加载更小的图片，因为现有资源已经足够清晰，重新加载小图反而会产生额外的请求开销。

你需要的「不同断点使用不同宽高比的图片」属于响应式图片的「艺术指导」场景，原生HTML提供了<picture>标签专门解决这类需求，不需要依赖JavaScript，也不推荐用多个display: none的img标签实现。

推荐方案：使用<picture>标签 #

用法示例：

<picture>
  <!-- 视口≥768px时加载对应宽高比的image3 -->
  <source 
    media="(min-width: 768px)"
    srcset="/path/to/image3 304w"
    sizes="304px"
  >
  <!-- 视口640px~767px时加载对应宽高比的image2 -->
  <source 
    media="(min-width: 640px)"
    srcset="/path/to/image2 768w"
    sizes="768px"
  >
  <!-- 视口<640px时加载对应宽高比的image1 -->
  <source 
    media="(max-width: 639px)"
    srcset="/path/to/image1 343w"
    sizes="343px"
  >
  <!-- 兜底img，兼容不支持picture标签的旧浏览器 -->
  <img src="/path/to/image1" alt="图片描述">
</picture>

这个方案的优势：

• 原生HTML标准支持，无额外运行依赖
• 浏览器仅加载匹配当前媒体查询的资源，无多余带宽消耗
• 视口尺寸变化时会自动切换对应资源，放大、缩小均会触发切换，完全匹配需求

你提到的两种方案的问题 #

• 多个img标签配合display: none：不推荐。浏览器的预加载扫描器会无视CSS的display属性，提前加载所有img标签的图片资源，会产生大量无用请求，浪费用户带宽。
• JavaScript实现：只有当你需要额外的自定义逻辑（比如图片切换动画、加载统计等）时再考虑，普通场景下原生<picture>标签已经完全覆盖需求，不需要额外写脚本维护。

内容的提问来源于stack exchange，提问作者Johannes Stricker