html - 在不损失质量的情况下缩小 Retina 页面的尺寸(在 Chrome 上模糊)

Question

我注意到，在最新的 Chrome(撰写本文时为 54.x)上，使用 CSS 调整无损 png 文件(用于普通/Retina 目的)时，结果是模糊的。

在img标签中添加如下规则时

img {
   image-rendering: -webkit-optimize-contrast;
}

那么结果更好:

问题:Safari 的引擎以完全不同的方式呈现(更糟糕)

我的问题

1. 如何在不出现质量问题的情况下调整无损 PNG 的大小？
2. 如果调整大小总是会导致问题，那么处理更高 DPI 显示器的替代方法是什么？ (支持 https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/ 吗？)

Answer 1

您可以使用@media CSS 来更改图像的URL。使用图像编辑软件更改图像的大小，这样浏览器就不必处理缩放问题。