为什么“srcset”属性在页面上不起作用？答案

【问题标题】：Why is 'srcset' attribute not working on the page?为什么“srcset”属性在页面上不起作用？
【发布时间】：2021-12-02 12:23:02
【问题描述】：

我一直在做一个开发网站的项目。我想使用 'srcset' 属性在不同设备上应用不同大小的图像。以下是我在代码中定义图像的方式：

<img 
      srcset="images/mobile/image-header-750w.jpg 750w,
              images/desktop/image-header-2880w.jpg 2880w"
      sizes="(max-width: 767px) 750w,
              2880w"
      src="images/desktop/image-header-2880w.jpg" 
      alt="" 
      class="header-banner">

但浏览器未检测到宽度为 750 像素的移动图像。

有人知道为什么会这样吗？

【问题讨论】：

该屏幕截图看起来像是从桌面浏览器截取的，而不是移动浏览器。我看到您启用了 Chrome 响应模式按钮，但您也需要向我们展示。
这更像是一个评论而不是答案，但我过去一直被这个迷惑，因为更大的图像被缓存了，并且浏览器足够聪明，可以重新加载图像的最大缓存版本.请务必在检查器打开的情况下检查您是否已禁用缓存，它可能一直工作正常而您不知道

标签： html css frontend srcset

【解决方案1】：

您必须在srcset（又名w）中设置“宽度描述符”，并在sizes（又名px、em、rem...）中设置预期宽度。

<img 
      srcset="images/mobile/image-header-750w.jpg 750w,
              images/desktop/image-header-2880w.jpg 2880w"
      sizes="(max-width: 767px) 750px, 2880px"
      src="images/desktop/image-header-2880w.jpg" 
      class="header-banner">

请记住，浏览器仍会根据预期的尺寸和密度（x1 用于“经典”屏幕，x2 或 x3 用于高密度显示，即视网膜屏幕）选择要使用的图像。

例如，默认情况下 Safari 的响应模式使用 x3 密度。在此配置中，在移动模式下（大约 400 像素宽），它仍然显示2880w 图像。高密度的预期尺寸为 750px，它需要 2250px 宽的图像才能以最佳状态渲染。 Safari 将选择集合中最接近的图像（所以2880w 超过750w）。

【讨论】：