在不损失质量的情况下缩小视网膜页面（Chrome 时模糊）

Question

我注意到在使用 CSS 调整无损 png 文件大小时（用于 normal/Retina 目的），最近 Chrome，（54.x 在写作时间），结果是模糊的。

将以下规则添加到 img 标签时

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

那么结果更好：

问题：Safari 的引擎以完全不同的方式呈现（更糟糕）

我的问题

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

Answer 1

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

Answer 2

使用媒体查询进行高分辨率显示，例如：

@media
(-webkit-min-device-pixel-ratio: 1.3),
(min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
   /* Retina-specific stuff here */
}

供参考：http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/

Answer 3

最后我选择使用 srcset 来做纯响应式图片：

            <img
                    src="./img/logo.png"
                    srcset="./img/logo.png 1x,
                        ./img/logo@2x.png 2x"
            >

Answer 4

使用HTML srcset 属性

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

并用 adobe ps 散文图像

在不损失质量的情况下缩小视网膜页面（Chrome 时模糊）

Downscaling page for retina without loss of quality (blurry on Chrome)

html

css

safari

responsive-images