照片作为网站主页背景尺寸？

Question

希望这个问题在stackoverflow上没问题。我想用照片作为网站主页的背景。照片将占据整个页面。但是我不知道我应该用什么样的分辨率拍照。我想的是1920 x 1200px，因此24英寸屏幕的人看不到照片的“结束”。不过那么大吗？我担心这个网站在大于24英寸的屏幕上看起来不错。

也有人知道我应该如何优化照片，以便尽可能快地加载？感谢。

Answer 1

总的来说，这似乎是一个权衡取舍的问题。分辨率越高，无效页面的页面加载速度越慢。减速是否值得拥有更好的分辨率并避免像素化？

另外，我认为你问的是错误的问题，因为24英寸的屏幕可以有多种分辨率。

我会按以下方式处理：

1. 你的照片看起来“好”的最大分辨率是多少？然后让你的照片分辨率。如果24“是你的目标，请查看此尺寸监视器通常”支持的分辨率并将其作为目标。

2. 您想要多少种颜色？ （或者也许是b＆amp; w /灰度）。如果减少颜色数量（最好是“网页安全”颜色），您可以使用相同的分辨率加载更快。

3. 像Photoshop（或Gimp）这样的程序可能会给你最大的调整这些参数的能力。

当您的观看者窗口较小时，您是否只关心是否只显示部分照片？

我知道这不是一个简单而干燥的答案，但这些事情很少（恕我直言）。

Answer 2

对于适用于大多数现代浏览器的解决方案，您需要将图片放在z-index小于页面其余部分的div中（请参阅：Stretch and scale CSS background）

就创建一张压缩到小尺寸的1920x1200照片而言，我建议尝试更小的尺寸（例如960x600），看看它在24英寸屏幕上是否合适。有许多程序可以让您为压缩指定文件大小（例如FastStone Resizer），因此您可以试验并查看可接受的内容。通常，细节和/或颜色深度较少的照片会更好地压缩。

您将遇到的另一个问题是宽高比。即使假设您的网站始终在全屏浏览器而不是窗口中打开，有时该屏幕的比例为16：9，有时为4：3。您可以尝试在中心创建一个具有漂亮4：3比例“甜点”的照片，并根据当前窗口宽高比使用一些Javascript调整您的div。