如MDN上针对<img srcset="...">所定义：
每个字符串由以下内容组成：
图像的URL，可选择空格，后跟一个：

• 宽度描述符，或后面紧跟“w”的正整数。宽度描述符除以sizes属性中给定的源大小，以计算有效像素密度。
• 像素密度描述符是正浮点数，后面紧跟“x”。

你试图同时使用这两个词，这是违法的。

对于HPDI设置和图像响应大小的组合，您实际上应该使用带有几个<source>和一个备用<img>元素的<picture>。
详细信息见本文。

根据MDN，“在同一个srcset属性中混合宽度描述符和像素密度描述符是不正确的。重复的描述符（例如，同一个srcset中的两个源都用'2x'描述）也是无效的。”
2x刊登了4次，这是无效的。
以下是MDN的一个示例：
示例4：使用srcset和sizes属性
使用'w'描述符时，在支持srcset的用户代理中忽略src属性。当(max-width: 600px)媒体条件匹配时，图像将为200px宽，否则为50vw宽（视口宽度的50%）。

<img src="clock-demo-thumb-200.png" 
    alt="Clock" 
    srcset="clock-demo-thumb-200.png 200w,
    clock-demo-thumb-400.png 400w"
    sizes="(max-width: 600px) 200px, 50vw">

@vbarinov的答案中链接的“艺术指导用例”（摘自developers.google.com）展示了如何将宽度和像素密度作为加载和显示图像源的标准：

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

在宽度至少为800像素的视口中，head.jpg应显示在单密度显示器上，而head-2x.jpg应显示在双密度或更高密度的显示器上。
低于800像素但宽度至少为450像素的单密度显示的视口应显示head-small.jpg，而head-small-2x.jpg则用于双密度或更高密度。
<img>标记内的备用图像定义有另一个srcset，它为宽度低于450像素的视口定义了双密度版本（head-fb-2x.jpg）。
不支持源集或图片元素的单密度设备和浏览器将退回到显示head-fb.jpg。
在更复杂的场景中，我们还可以添加其他图像格式，以利用webp压缩，同时为不支持webp的浏览器提供jpg版本。

<picture>
  <source media="(min-width: 800px)" srcset="head.webp, head-2x.webp 2x" with="800" height="941">
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x" with="800" height="941">
  <source media="(min-width: 450px)" srcset="head-small.webp, head-small-2x.webp 2x" width="800" height="941">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x" width="800" height="941">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" width="400" height="471" alt="a head carved out of wood">
</picture>

下面是一个codepen的复杂例子。

我认为，到2022年，假设高DPI屏幕并利用srcset的断点概念会更容易：

<img alt="Background image flowers"
  srcset="img/flowers-480.jpg 480w,
          img/flowers-768.jpg 768w,
          img/flowers-960.jpg 960w,
          img/flowers-1280.jpg 1280w,
          img/flowers-1920.jpg 1920w, 
          img/flowers-4096.jpg 4096w"
   sizes="(max-width: 1279px) 100vw,
          (min-width: 1280) 1280px"
     src="img/flowers-960.jpg">