3

我有一个 2000 像素 x 1500 像素的彩色背景图像，由于细节原因，我将其保存为 1.1 MB 渲染的 jpeg。我正在使用 CSS 背景属性来渲染图像。因此，对于 Web 开发人员来说相对较新，并且与在此过程中对设计更改不持开放态度的客户/设计师合作，我应该做些什么来帮助这个图像快速加载。我不知道这是否有所作为，但该网站使用的是 Joomla 1.5.9。这是我一直想了解的东西，但在找到解决方案时遇到了麻烦……我希望有人能提供帮助！

谢谢大家！

4

5 回答 5

8

没有办法让图像神奇地加载得更快。不过，有时，将图像分割成更小的图像会带来惊人的尺寸增益。所以如果你的 CSS 布局没有问题（但通常是这样），你可以试试这个。

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

于 2011-06-01T05:10:50.900 回答
3

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

于 2011-06-01T05:12:34.617 回答
1

你可以通过使用立即调用头脑中的图像

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

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

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

或者您可以将网站的加载完全延迟几秒钟，直到您可以确定图像正在加载，您可以尝试隐藏所有元素并在 setTimeout 时将它们淡入类似

*CSS

body{
opacity:0;
}

*jQuery

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

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

于 2011-06-01T02:13:03.897 回答
0

在页面的其余部分加载后加载背景图像对您有用吗？至少这样访问者将能够使用您网站的其余部分，直到 1.1MB 加载完毕。

类似于将style属性设置在 onload 函数内的东西？<body>background: url(image.jpg)

于 2011-06-01T05:18:51.477 回答
0

通过 CDN 交付图像可能会加快速度；更好的通常经过优化，可以将适当的 TCP 数据包大小/MTU 传递给各种各样的客户端，并且通常在快速传递事物的细节方面做了很多工作。像手机这样的慢速连接仍然会因此而讨厌你，但是正确设置数据包大小等可以充分利用可用带宽。

于 2012-05-08T23:33:01.860 回答