缩放后网页中的小图像显得模糊（仅限webkit）

Question

我有非常小的演示图像，我在Javascript中生成，在base64中编码，并显示在网页中。 我们如何解释和防止这个图像在放大时显得模糊的事实？

以下是我放大到100px的3x2像素图像的示例：

<img src="data:image/bmp;base64,Qk1OAAAAAAAAADYAAAAoAAAAAgAAAAMAAAABABgAAAAAABgAAAATCwAAEwsAAAAAAAAAAAAAAP8A/wAAAAD/AAAAAP8AAAAA/wD/AAAA" width="100">

编辑：对此的正确措辞当然是插值。感谢this page我找到了FF的完美解决方案：style="image-rendering:-moz-crisp-edges;"。这个问题仍然适用于webkit。

非工作尝试：

image-rendering: crisp-edges;
image-rendering: pixelated;

最好但不完美：

image-rendering: -webkit-optimize-contrast;

EDIT2：https://www.chromestatus.com/feature/5118058116939776

Answer 1

因为光源只有两个像素宽，所以每个源像素显示为50像素宽。浏览器尝试在给定的像素之间进行插值，从而导致外观模糊。