Question

我有一个2000px x 1500px的彩色背景图像，由于细节，我将其保存为1.1 MB的jpeg。我正在使用CSS background属性来渲染图像。因此，对于Web开发人员来说相对较新，并且与客户/设计人员合作，在此过程中此时无法对设计进行更改，我应该怎么做以帮助快速加载此图像。我不知道它是否有所作为，但该网站使用的是Joomla 1.5.9。这是我一直想要了解但却无法找到解决方案......我希望有人可以提供帮助!!

谢谢大家！

Answer 1

没有办法让图像神奇地加载得更快。但有时候，在较小的图像中分割图像可以获得惊人的尺寸增益;所以，如果你的CSS布局没有问题（通常是这样），你可以试试这个。

另一种可能性是使用progressive JPEG图像。它们以这样的方式编码，使浏览器在加载时能够逐步显示更精确的图像。这意味着，首先，图像看起来模糊（或不完整）但具有全尺寸，然后逐渐变得更清晰和更好。它非常适合用于缓慢加载的图像（或者至少是承认缓慢加载的图像）。

Answer 2

您可以做的最好的事情是尝试将文件大小缩小到尽可能小。让它使用某种类型的优化器，例如smush.it。如果您创建了背景图像，请先尝试将其保存为渐进式，然后先加载较低的res版本，然后完成加载。但最好的方法是尝试缩小图像宽度和高度的大小，方法是找到一个重复的图案，并将该部分裁剪出来并使用它。大多数about.me图像的大小不超过100kb，宽度超过1200px。

Answer 3

你可以使用

立即调用头部中的图像

<script>
(new Image()).src = "IMAGE PATH";
</script>

并确保您使用不同的程序尽可能多地压缩图像，或者如果您有photoshop cs5，您可以将其保存为Web设备以去除所有额外的垃圾，您可以尝试yahoo的smush.it < / p>

http://www.smushit.com/ysmush.it/

或者你可以完全延迟加载网站几秒钟，直到你可以确定图像正在加载，你可以尝试隐藏所有元素并将它们淡入一个像setTimeout这样的东西

* CSS

body{
opacity:0;
}

* jQuery的

setTimeout(function(){$('body').animate({opacity:'1'},300)},5000);

虽然这可能不是那么实用。

Answer 4

在页面的其余部分为您加载后，是否会加载背景图像？至少通过这种方式，访问者可以使用您网站的其余部分，直到1.1MB已加载。

在onload函数中将style的{{1}}属性设置为<body>的内容是什么？

Answer 5

通过CDN传送图像可能会加快速度;较好的通常经过优化，可以为各种各样的客户提供合适的TCP数据包大小/ MTU，并且通常在快速交付的细节方面做了大量工作。像手机这样的慢速连接仍然会让你讨厌它，但是正确地获取数据包大小可以充分利用可用的带宽。

加载高分辨率背景图像

5 个答案: