Question

我想在我的背景中使用各种图片作为网站。我已经创建了一个代码，可以为不同的屏幕尺寸打开不同的图像。现在我只有2种图像，这是代码：

$(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

宽度超过1920像素的照片，尺寸 270KB-280KB的照片

我在互联网上尝试了类似的案例，但我找不到任何东西。你能告诉我这个案子的平均数或推荐数吗？！？！

非常感谢！

达尼

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

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

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

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

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

耗尽各种可能性，所以我想在这里提供一些帮助......

谢谢！

Answer 1

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

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

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

我个人认为270KB-280KB的背景图像太多了，特别是对于非常罕见的分辨率。并非那么多用户的分辨率大于1920px宽。

很抱歉没能给你直接和简短的答案，但也许这有点帮助。

建议正确的背景网络图片大小

1 个答案: