视网膜缩小页面而不会降低质量（Chrome模糊）

Question

我注意到当使用CSS调整无损png文件的大小（正常/ Retina目的）时，在最新的Chrome上（撰写本文时为54.x），结果很模糊。

将以下规则添加到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更改图片的网址。使用图像编辑软件更改图像的大小，以便浏览器不必处理缩放。

Answer 2

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

sub test()

    Dim db As Database
    Dim fld As Field
    Dim tbl As TableDef

    set db=CurrentDb
    set tbl = db.TableDefs("tblMyTable")
    Set fld = tbl.CreateField("Identifier", dbText)
    fld.Properties("Expression") = "abc: " & "123"

end sub

供参考：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一起处理图像