加载高分辨率背景图像
我有一个 2000 像素 x 1500 像素的彩色背景图像,由于细节的原因,我将其保存为以 1.1 MB 渲染的 jpeg 格式。我正在使用 CSS 背景属性来渲染图像。因此,对于网络开发人员来说相对较新,并且与在此过程中不接受设计变更的客户/设计师合作,我应该做什么来帮助该图像加载速度极快。我不知道这是否有什么不同,但该网站正在使用 Joomla 1.5.9。这是我一直想理解的事情,但很难找到解决方案......我希望有人可以提供帮助!
谢谢大家!
I have a colourful background image that is 2000px x 1500px and because of the details I am saving it as a jpeg that renders at 1.1 MB. I am using the CSS background property to render the image. So being relatively new to web dev and working with a client/designer that's not open to a change of design at this point in the process, what should I do to help this image load blazingly fast. I don't know if it makes a difference but the site is using Joomla 1.5.9. This is something I've always wanted to understand but have had trouble uncovering solutions for... I hope someone can help!!
Thanks everyone!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(5)
您可以立即通过使用调用头部中的图像
<script>
(new Image()).src = "IMAGE PATH";
</script>
,并确保使用不同的程序尽可能多地压缩图像,或者如果您有 Photoshop cs5,您可以将其保存到网络设备以去除所有额外的垃圾,你可以尝试雅虎的 smush.it
http://www.smushit.com/ysmush.it/
或者您可以将网站的加载完全延迟几秒钟,直到您确定图像正在加载,您可以尝试隐藏所有元素并在 setTimeout 上淡入它们,例如
*CSS
body{
opacity:0;
}
*jQuery,
setTimeout(function(){$('body').animate({opacity:'1'},300)},5000);
尽管这可能不太实用。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
没有办法让图像神奇地加载得更快。但有时,将图像分割成较小的图像可以带来令人惊讶的尺寸增益;因此,如果您的 CSS 布局没有问题(但通常是这样),您可以尝试一下。
您的另一种可能性是使用 渐进式 JPEG 图像。它们的编码方式使浏览器能够在加载时显示逐渐更精确的图像。这意味着,起初,图像看起来模糊(或不完整),但具有全尺寸,然后逐渐变得更加清晰和更好。它非常适合加载缓慢的图像(或者至少,公认加载缓慢的图像)。
There's no way to make images magically load faster. Sometimes, though, splitting an image in smaller images allows for surprising size gains; so if it's not out of question for your CSS layout (it typically is, though), you could try this.
Another possibility for you would be to use progressive JPEG images. They are encoded in such a way that enables browsers to display a progressively more precise image as it loads. This means that at first, the image appears blurry (or incomplete) but with full-dimensions, then it progressively gets sharper and better. It's well-suited for images meant to load slowly (or at least, images acknowledged to load slowly).