0

我想在我的网站背景中使用各种图像。我创建了一个代码，它将为不同的屏幕尺寸打开不同的图像。现在我只有两种图像，这是代码：

$(window).load(function() {
var randomImages = ['img1','img2','img3','img4','img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);

 var $win = $(this);
 var isBig = $(window).width() > 1920 ? '_big' : '';
 var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + isBig + '.jpg').css({'position':'fixed','top':0,'left':0});
    function resize() {
        if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
          $img.css({'height':'100%','width':'auto'});
        } else {
          $img.css({'width':'100%','height':'auto'});
        }
    }
    $win.resize(function() { resize(); }).trigger('resize');
});

我会为不同的尺寸添加更多选项，但在我继续之前，我想知道图片的推荐尺寸是多少。图片的质量很重要，但背景的速度也很重要。这些是我目前拥有的尺寸：

正常分辨率高达 1920px 宽，图片大小为130KB-140KB

图片宽度超过1920px，图片大小为270KB-280KB

我在互联网上尝试过类似的案例，但我找不到任何东西。你能告诉我这个案例的平均值或建议是多少吗？！？！

非常感谢！

丹妮

编辑：更多细节///////////////

我的原始图片是 4752 X 3168，.TIFF，分辨率为 240 像素/英寸，重量为 46MB。在我在 Photoshop 中处理它们之后，降低它们的分辨率、大小并为网络设备保存......我修改为以下内容：

分辨率为 72 像素/英寸 尺寸 1426 X 950 JPG 40 质量

我最终得到了一张 162.1KB 的图片。加载后，此图片必须覆盖整个屏幕，因此图片的大小需要足够接近，以免像素化。这是一个好的尺寸还是Photoshop有更好的方法来制作更小的大尺寸图片并保持其质量。

这将适用于来自欧洲和南美的网络用户。没有数据限制，最常见的分辨率是 1024x768，但我希望图像能够适应任何其他尺寸而没有像素化。

用完了可能性，所以我想在这里得到一些帮助......

谢谢！！

4

1 回答 1

3

这个问题很难回答，因为它真的取决于：

  1. 这是一个什么样的网站。
  2. 如果您有任何类型的数据限制。
  3. 用户：他们典型的互联网连接速度有多快，如果他们通常可以等待更长时间以获得更清晰的图像，他们最常见的分辨率是多少。

这只是您在做出决定之前可能需要考虑的一些事情的简短列表。

就我个人而言，我认为 270KB - 280KB 的背景图像太多了，尤其是对于非常不常见的分辨率。分辨率大于 1920 像素宽的用户并不多。

很抱歉不能给你一个直接而简短的答案，但也许这至少有一点帮助。

于 2012-08-21T14:56:55.747 回答