Fullpage.JS 背景图片的理想图片尺寸

Question

我正在使用 fullpage.js 创建视差网站，但是我正在考虑可用于每个部分的背景图像的理想图像尺寸。

如果图片太大，加载时间会更长，但是当图片太小时，可能会牺牲图片的质量，所以我正在寻找理想的图片尺寸。

Answer 1

您可以使用基于比率 16:9 的图像，通常是 1.777 单位比 1 单位。一个非常好的合理尺寸可以是 1920 x 1080 从 photoshop 或任何其他软件保存到 web 也 1440 x 900 是一个很好的尺寸但是你会发现它在 21" plus 屏幕上有点模糊

Answer 2

您可以使用 CSS 3 media queries 根据视口的分辨率加载一张或另一张背景图片。

这对在移动设备上加载网站有很大帮助，不会为小型笔记本电脑加载大图片。

此外，您可以使用 this lazy load technique 动态加载背景。这样您就不会在不可见的部分加载图像。