加载高分辨率背景图像

发布于 11-10 15:16 字数 242 浏览 1 评论 0原文

我有一个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

莳間冲淡了誓言ζ2024-11-17 15:16:10

没有办法让图像神奇地加载得更快。但有时,将图像分割成较小的图像可以带来令人惊讶的尺寸增益;因此,如果您的 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).

你是年少的欢喜2024-11-17 15:16:10

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

The best thing that you can do is try to shrink the file size to as small as possible. Let this be using some type of optimizer, smush.it for example. If you created the background image try saving it as progressive first, it loads a lower res version first then finishes loading. But the best thing is to try to shrink the size of the image width and height by finding a repeating pattern and cropping just that portion out and using it. Most about.me images are no larger than 100kb in size that are above 1200px wide.

坏尐絯2024-11-17 15:16:10

您可以立即通过使用调用头部中的图像

<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);

尽管这可能不太实用。

you could immediatley call the image in the head by using

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

and make sure you compress the image as much as you can with different programs, or if you have photoshop cs5 you can save it for a web device to strip out all of the extra junk, you can try yahoo's smush.it

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

or you could delay the loading of the site entirely for a few seconds, until you can be sure that the image is loading, you could try something like hiding all of the elements and fading them in upon a setTimeout something like

*CSS

body{
opacity:0;
}

*jQuery

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

although that may not be all that practical.

蓝天白云2024-11-17 15:16:10

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

类似于在 onload 函数中将 style 属性设置为 background: url(image.jpg)

Would loading the background image after the rest of the page has loaded work for you? At least this way visitors will be able to use the rest of your site until the 1.1MB has loaded.

Something along the lines of setting the style attribute of the <body> to be background: url(image.jpg) within an onload function?

无语#2024-11-17 15:16:10

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

Delivering the image over a CDN will likely speed things up; the better ones are usually optimized to deliver the proper TCP packet size/MTU to the wide variety of clients out there and have generally done a lot of work in the details of delivering things quickly. Slow connections like cellphones will still hate you for it, but getting things like packet size right can make the most of the bandwidth that is available.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文