我有一个彩色的背景图像，是2000 px x 1500 px，因为细节，我保存为一个jpeg渲染在1。1 MB。我正在使用CSS背景属性来呈现图像。因此，作为一个相对较新的web开发人员，并且与一个客户端/设计师一起工作，在这个过程中的这一点上，我不愿意改变设计，我应该做些什么来帮助这个图像快速加载。我不知道这是否有区别，但该网站使用的是Joomla 1。5.9.这是我一直想了解的事情，但却很难找到解决方案。希望有人能帮忙！！谢谢大家！
cyej8jka1#
没有办法让图像神奇地加载得更快。有时候，虽然，分裂图像在较小的图像允许令人惊讶的大小增益;因此，如果您CSS布局没有问题（通常是这样），您可以尝试这样做。另一种可能性是使用progressive JPEG图像。它们的编码方式使浏览器能够在加载时显示越来越精确的图像。这意味着，起初，图像看起来模糊（或不完整），但具有全尺寸，然后它逐渐变得更清晰，更好。它非常适合加载缓慢的图像（或者至少，公认加载缓慢的图像）。
ujv3wf0j2#
你能做的最好的事情是尝试将文件大小缩小到尽可能小。假设这是使用某种类型的优化器， www.example.com 。如果您创建的背景图像尝试将其保存为渐进式第一，它加载一个较低的res版本第一，然后完成加载。但最好的办法是通过找到一个重复的模式来缩小图像的宽度和高度，然后裁剪掉并使用它。Mostwww.example. www.example.com 图像的大小不超过100kb，宽度超过1200px。
to94eoyn3#
你可以直接调用头部的图像
<script> (new Image()).src = "IMAGE PATH"; </script>
并确保你压缩图像尽可能多的你可以与不同的程序，或者如果你有photoshop cs5你可以保存它为一个网络设备剥离所有额外的垃圾，你可以尝试雅虎的 www.example.comhttp://www.smushit.com/ysmush.it/或者你可以延迟网站的加载几秒钟，直到你可以确定图像正在加载，你可以尝试隐藏所有的元素，并在setTimeout时将它们淡入，比如
body{ opacity:0; }
setTimeout(function(){$('body').animate({opacity:'1'},300)},5000);
尽管这可能并不那么实际。
am46iovg4#
在页面的其余部分加载之后加载背景图像对您有用吗？至少这样访问者将能够使用您的网站的其余部分，直到1。1MB已加载。在onload函数中将<body>的style属性设置为background: url(image.jpg)？
<body>
style
background: url(image.jpg)
ldxq2e6h5#
通过CDN提供图像可能会加快速度;更好的通常被优化以向各种各样的客户端提供适当的TCP分组大小/MTU，并且通常在快速提供事物的细节方面做了大量的工作。像手机这样的慢速连接仍然会让你讨厌，但是正确的数据包大小可以充分利用可用的带宽。
5条答案
按热度按时间cyej8jka1#
没有办法让图像神奇地加载得更快。有时候，虽然，分裂图像在较小的图像允许令人惊讶的大小增益;因此，如果您CSS布局没有问题（通常是这样），您可以尝试这样做。
另一种可能性是使用progressive JPEG图像。它们的编码方式使浏览器能够在加载时显示越来越精确的图像。这意味着，起初，图像看起来模糊（或不完整），但具有全尺寸，然后它逐渐变得更清晰，更好。它非常适合加载缓慢的图像（或者至少，公认加载缓慢的图像）。
ujv3wf0j2#
你能做的最好的事情是尝试将文件大小缩小到尽可能小。假设这是使用某种类型的优化器， www.example.com 。如果您创建的背景图像尝试将其保存为渐进式第一，它加载一个较低的res版本第一，然后完成加载。但最好的办法是通过找到一个重复的模式来缩小图像的宽度和高度，然后裁剪掉并使用它。Mostwww.example. www.example.com 图像的大小不超过100kb，宽度超过1200px。
to94eoyn3#
你可以直接调用头部的图像
并确保你压缩图像尽可能多的你可以与不同的程序，或者如果你有photoshop cs5你可以保存它为一个网络设备剥离所有额外的垃圾，你可以尝试雅虎的 www.example.com
http://www.smushit.com/ysmush.it/
或者你可以延迟网站的加载几秒钟，直到你可以确定图像正在加载，你可以尝试隐藏所有的元素，并在setTimeout时将它们淡入，比如
尽管这可能并不那么实际。
am46iovg4#
在页面的其余部分加载之后加载背景图像对您有用吗？至少这样访问者将能够使用您的网站的其余部分，直到1。1MB已加载。
在onload函数中将
<body>的style属性设置为background: url(image.jpg)？ldxq2e6h5#
通过CDN提供图像可能会加快速度;更好的通常被优化以向各种各样的客户端提供适当的TCP分组大小/MTU，并且通常在快速提供事物的细节方面做了大量的工作。像手机这样的慢速连接仍然会让你讨厌，但是正确的数据包大小可以充分利用可用的带宽。