照片作为网站首页背景尺寸？
希望这个问题在 stackoverflow 上没问题。我想使用照片作为网站主页的背景。照片将占据整个页面。但我不知道我应该拍什么分辨率的照片。我考虑的是 1920 x 1200 像素，这样 24 英寸屏幕的人就看不到照片的“末端”。然而，这足够大吗？我担心该网站在大于 24 英寸的屏幕上看起来正常。
还有人知道我应该如何优化照片以使其加载速度尽可能快吗？谢谢。
hope this question is ok on stackoverflow. I want to use a photo as the background for the homepage of a website. The photo will be take up the entire page. However i don't know what resolution i should make the photo. I was thinking 1920 x 1200px so that people with 24 inch screen don't see the 'ends' of the photo. However is that big enough? I'm worried about the site looking ok on screens larger than 24 inches.
Also anyone know how i should optimize the photo so it loads as fast as possible? Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
总的来说，这似乎是一个权衡的问题。分辨率越高，无操作页面的页面加载速度就越慢。为了获得更好的分辨率并避免像素化而放慢速度是否值得？
另外，我认为您问错了问题，因为 24 英寸屏幕可以有多种分辨率。
我会通过以下方式解决这个问题：
您必须让照片看起来“良好”的最大分辨率是多少？然后将你的照片设置为该分辨率。如果您的目标是 24 英寸，请查看该尺寸的显示器“通常”支持什么分辨率并以此为目标。
您想要多少种颜色？ （或者可能是黑白/灰度）。如果减少颜色数量（最好是“网络安全”颜色），则可以在相同分辨率下更快地加载。
像 Photoshop（或 Gimp）这样的程序可能会为您提供调整这些参数的最大能力。
当您的查看器窗口较小时，您是否关心是否只显示照片的一部分？
我知道这不是一个固定的答案，但这些事情很少是（恕我直言）。
Overall, this seems to be a question of trade-offs. The better the resolution, the slower the page load for a do-nothing page. Is it worth the slow-down to have the better resolution and avoid pixellation?
Also, I think you're asking the wrong question, since a 24-inch screen can be in multiple resolutions.
I would approach this in the following manner:
what is the largest resolution you MUST have your photo look "good" on? Then make your photo that resolution. If 24" is your target, look at what resolutions this size monitor "typically" supports and target that.
What number of colors you want? (or perhaps b&w / grayscale). If you reduce the number of colors (preferably to "web-safe" colors), you can load faster with the same resolution.
A program like Photoshop (or Gimp) will probably give you the most power in tuning these parameters.
Do you care if only a portion of the photo displays when your viewer has a smaller window?
I know this isn't a cut and dried answer, but these things seldom are (IMHO).
对于适用于大多数现代浏览器的解决方案，您需要将图像放置在 z-index 小于页面其余部分的 div 中（请参阅：拉伸和缩放 CSS 背景）
至于创建将压缩为小尺寸的 1920x1200 照片，我建议尝试较小的尺寸（例如 960x600）看看它在 24 英寸屏幕上看起来是否正常。有许多程序可以让您指定压缩的文件大小（例如 FastStone Resizer），以便您可以进行试验并看看什么是可以接受的。一般来说，细节和/或颜色深度较少的照片压缩效果会更好。
您将遇到的另一个问题是纵横比。即使假设您的网站始终在全屏浏览器而不是窗口中打开，有时该屏幕的比例将为 16:9，有时为 4:3。您可以尝试创建一张在中心具有漂亮的 4:3 比例“最佳点”的照片，并使用一些基于当前窗口纵横比的 Javascript 来调整您的 div。
For a solution that will work on most modern browsers, you will need to place the image in a div with a z-index less than the rest of your page (see: Stretch and scale CSS background)
As far as creating a 1920x1200 photo that will compress to a small size, I would recommend trying a smaller size (e.g. 960x600) and see if it looks okay on your 24-inch screen. There are many programs that will let you specify file size for your compression (e.g. FastStone Resizer) so you can experiment and see what is acceptable. In general, photos with less detail and/or color-depth will compress better.
Another problem you are going to run into is aspect ratio. Even assuming that your web-site is always opened in a full screen browser and not a window, sometimes that screen is going to be 16:9 ratio and sometimes 4:3. You could try to create an photo that has a nice 4:3 ratio "sweet-spot" in the center and adjust your div using some Javascript based on the current window aspect-ratio.