Chrome中使用srcset和大小的图像模糊

Question

我在Chrome中出现图像模糊的问题。

我正在研究一个带有画廊的项目。 图像大小各不相同，每个图像都有2个版本：

• 较小的屏幕可用于较小的屏幕/较低的分辨率
• 更大的屏幕更大/更高的分辨率

我调整了图像的大小，使较小的版本与页面所占空间相等（或类似）（例如，屏幕上为641px宽，图像大小为700px宽），较大的版本为较小的两倍

我正在尝试使用srcset和大小制作响应式图像。 这是我的代码：

<img srcset="images/common-area2.jpg 700w, images/common-area2-large.jpg 1400w"
     sizes="(max-width: 56.25em) 45vw, (max-width: 37.5em) 41vw, 641px"
     src="images/common-area2-large.jpg"
     class="gallery__img">

Srcset和sizes正常工作，浏览器选择了正确的图像，但是却呈现出可怕的效果。在Chrome中，所有图像看起来确实很模糊（实际上伤害了我的眼睛！），但是在Firefox中却没有（尽管在检查器中将DPR更改为1时，它们变得有些模糊）。

我不明白的是：

1. 图像在GIMP或其他照片编辑器中看起来不错
2. 如果我不使用srcset和sizes，而仅使用简单的img标签，图像看起来会很好

我已经尝试添加图像渲染，并花了数小时试图找到解决方案，并尝试使用不同的图像大小和质量，但无济于事。

有人知道这可能是什么吗？