3

我正在构建一个投资组合网站，该网站依赖于在浏览器窗口中以全尺寸显示精美、高质量的照片。

我正在使用 CSS3 background-size: 封面标签和这个小片段的组合，它可以用更高分辨率的图像代替更高分辨率的设备：

http://www.bdoran.co.uk/2012/08/28/detecting-and-delivering-images-to-retina-displays/

根据那篇文章，我需要至少三个版本的图像，一个是 1x，一个是 1.5x，一个是 2x，但这些都有可能变得非常庞大。

是否存在图像的最佳尺寸，它可以在大屏幕上足够好地缩放，但没有巨大的文件大小和下载时间？

用户停留在页面上的时间越长，我是否应该考虑逐步提高质量？那么首先加载低质量/分辨率的图像，然后用更高的图像替换？

4

1 回答 1

1

根据这个浏览器统计数据， 1800 x 1080 对我来说似乎是一个合理的尺寸，如果你想安全起见的话。也许您的目标受众使用更大的屏幕，如果可以的话，您应该找出答案。

我不会像您描述的那样进行渐进式增强。每个用户都必须下载图像 3 次。

相反，您可以使用媒体查询来检查用户的屏幕大小，如此处所示。因此，用户正在下载对他们来说意味着什么。

编辑：这也是一种有趣的方法。

于 2013-05-27T20:33:09.533 回答