我正在尝试使用srcset来加载不同的图像，具体取决于屏幕尺寸。它可以工作，但不是我想要的方式
<img src="assets/img/image.png" alt=""
sizes="(max-width: 900px) 91vw, 50vw"
srcset="assets/img/image-2000.png 2000w, assets/img/image-1000.png 1000w,assets/img/image.png 700w"
>
我正在使用window.devicePixelRatio = 2的设备上。当屏幕尺寸大于1500px时，image-2000被加载。当我仅需触摸下方时，它就会使用image-1000。这就是问题所在，因为例如，当屏幕大小为1400px时，<img>大小为700px，最佳使用图像为2000px，因为1000px版本为400px会变小，从而导致图像非常模糊
很明显，浏览器会尝试使用最接近所需大小的图像，即使最好使用下一个更大的图像也是如此。因此，如何指示它不使用舍入，而是使用大于<img>元素的图像。如果有更好的选择来实现取决于屏幕大小的动态图像加载，我也愿意接受。你怎么做呢？您只是使用JavaScript来选择图片吗？
出于SEO的目的，我试图避免使用css's background-image。