【发布时间】：2014-01-04 01:37:04
【问题描述】：
我正在构建一个投资组合网站，该网站依赖于在浏览器窗口中以全尺寸显示精美、高质量的照片。
我正在使用 CSS3 background-size:cover 标签和这个小 sn-p 的组合，它可以用更高分辨率的图像代替更高分辨率的设备：
http://www.bdoran.co.uk/2012/08/28/detecting-and-delivering-images-to-retina-displays/
根据那篇文章，我需要至少三个版本的图像，一个是 1x，一个是 1.5x，一个是 2x，但这些都有可能变得非常庞大。
是否存在最佳尺寸的图像，它可以在大屏幕上很好地缩放，但文件大小和下载时间不会很大？
我是否应该考虑让用户在页面上停留的时间越长越能提高质量？所以先加载低质量/分辨率的图像，然后用更高的图像替换？
【问题讨论】：
-
您将需要一些大型主机！您是否考虑过将图像切割成不同分辨率的图块？您将首先显示低分辨率，然后允许用户根据需要切换到高分辨率，或者放大图像的某些部分（因此您只加载要显示的图块而不是整个图像）。
-
有一种图像类型，当它最初加载时，它是低质量的，但随着用户在页面上停留的时间越长，它会逐渐变得更高质量。现在好像用的不多了，我看看能不能给你找个链接。
-
给你。该技术称为“隔行扫描”，需要应用于图像本身：stackoverflow.com/questions/10771920/…
-
我最近对我的上一个个人网站 (worldisbeautiful.net) 也有同样的反应。由于我想触摸所有可以触摸的设备，因此我最终得到了一个独特的背景，其宽度为 2000 像素，并被 jpegmini.com 严重压缩。