全屏缩放背景图的最佳图片尺寸（宽度x高度|文件大小）是多少？

Question

3

我正在构建一个依赖于在浏览器窗口以全尺寸展示美丽、高质量照片的作品集网站。

我使用了CSS3的background-size：cover标签和这个小技巧，可以为高分辨率设备替换更高分辨率的图像：

根据那篇文章，我需要至少三种版本的图片，一个1倍大小，一个1.5倍大小和一个2倍大小，但这些可能会变得非常大。

是否存在一种最佳图片大小，在大屏幕上缩放得足够好，但文件大小和下载时间不会太大？

我应该考虑随着用户停留在页面上的时间逐渐增加画质吗？所以首先加载低质量/分辨率图像，然后用更高的分辨率图像替换它？

- Robin Layfield

你需要一些强大的托管服务！你考虑过将图像切成具有不同分辨率的瓷砖吗？你可以先显示低分辨率，然后允许用户在需要时切换到高分辨率，或者放大图像的某些部分（这样你只需加载要显示的瓷砖而不是整个图像）。 - Jeff Watkins

有一种特定的图像类型，当它最初加载时，它的质量很低，但随着用户在页面上停留的时间越长，它逐渐变得更高质量。现在似乎不太常用，但我会看看能否为您找到链接。 - Robbie Dee

请看这里。这种技术称为“交错”，需要应用于图像本身：https://dev59.com/oWTWa4cB1Zd3GeqPB0tW - Robbie Dee

1

最近我对我的最新个人网站（http://worldisbeautiful.net）也做出了相同的思考。由于我想涵盖所有我能接触到的设备，我最终采用了一张2000像素宽度的唯一背景图片，并使用http://www.jpegmini.com/ 进行了大量压缩。 - Aurélien Grimpard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sebastian Starke · Accepted Answer

根据浏览器统计数据，对我来说1800 x 1080似乎是一个合理的尺寸，如果你想保险起见。也许你的目标受众使用更大的屏幕，如果可以的话，你应该弄清楚。

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

相反，您可以使用媒体查询来检查用户的屏幕大小，如此处所示。因此，用户只下载适合他们的内容。

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