使用大图像(文件大小)但不妨碍加载时间?

时间:2010-06-29 22:03:37

标签: javascript performance image

我的演示是here

基本上,我有一个巨大的图像(准确地说是19160px×512px,不到2MB),我使用javascript转换backgroundx,使其看起来好像正在发生转换。

我不能在不严重破坏图像质量的情况下压缩图像。有没有其他方法可以通过相同级别的跨浏览器来实现这一点,而不依赖于像flash这样的插件,但是加载速度更快?

6 个答案:

答案 0 :(得分:3)

您是否考虑过制作此视频?

它可能会稍微改善装载时间。

另外,另一个想法。您是否尝试过仅使用第一张和最后一张图片,将最后一张图片放在第一张图片的顶部,给它opacity:0并使用JavaScript淡化它(例如jQuery)?

效果与现在的效果不会100%相同,但它可能看起来足以取悦客户,并且可以将加载时间减少到最低限度。

如果这两个想法都不适合你,我认为前10-12帧可以作为GIF图像更有效地压缩。 (这是一个估计,我还没试过。)你必须将图像拆分成多个div才能做到这一点,并改变你用来切换图像的方法,你会有更多的请求,但它可能值得。

答案 1 :(得分:0)

如果是jpeg,您始终可以使用渐进式编码。它会在下载时变得更加清晰。

  

还有一个隔行扫描   “渐进式JPEG”格式,其中   数据经过多次压缩   越来越高的细节。这个   非常适合大型图像   通过a下载时显示   连接缓慢,允许合理   收到一部分后预览   的数据。 -Wikipedia

答案 2 :(得分:0)

将其剪切为Google地图。

答案 3 :(得分:0)

如果你想一次更改屏幕上的那么多像素,你必须以某种方式将它们带到客户端。您可以将其分成多个图像并使用除background-x之外的其他内容,但随后您将面临其他可能的网络中断。

我能想到的唯一替代方案是像这样的预计算图像是在客户端上进行计算 - 从全彩色图像开始并使用客户端的CPU进行操作。您的选项包括canvas或CSS3或插件。

答案 4 :(得分:0)

我不是Flash的忠实粉丝,但在这种情况下,它似乎是适合这项工作的工具(除非你需要它在iPhone上工作)。如果您没有Flash创作工具,则可以使用免费的Flex编译器。

请参阅http://www.insideria.com/2008/03/image-manipulation-in-flex.html

答案 5 :(得分:0)

将它变成GIF动画?将其分解为单个部分,以删除被内容遮盖的所有区域。