在HiDPI和普通屏幕上使纯HTML网页看起来很好

Question

我在 4k-monitor 上注意到字体看起来不错，但网站上的很多图片使用Chrome或Firefox看起来很模糊。

如何使HTML网页（可能包含琐碎的JavaScript）在所有显示器上看起来都不错，例如通过提供两个图像：

1。对于普通显示器（100％）和

2. 对于HiDPI显示器（200％）？

Answer 1

快速而简单的解决方案是只使用一张大于所需的图像。 例如：

有缺点：

1. 传输更多数据并缩短下载时间
2. 某些较旧的浏览器可能会渲染不完整大小的图像模糊

有更多具有多个图像的sophosticated解决方案，它们通常需要额外的JavaScript代码和库。只需几个易于压缩的图像，此解决方案的下载时间仍然较短。