HTML大图像性能问题

Question

我正试图制作像http://learnlakenona.com/

这样的生病滑块

但我在chrome中遇到了严重的性能问题（看起来他们的网站甚至没有在chrome上运行滑块）。我在div上使用背景图像CSS显示图像，将它们添加为img标签会导致更多延迟。

我禁用了所有的javascript，并注意到我只是在彼此的顶部放置了一些巨大的图像时仍然会陷入困境。

这里只是坐在那里的一些照片。尝试更改面板的大小，重新绘制图像将其锁定。 （有时它运行得有点好，很奇怪） http://jsfiddle.net/LRynj/2/

有没有人知道如何在这样的滑块上获得可接受的性能！？ （图像需要很大）

Answer 1

通过在图像编辑器中调整图像资源大小或降低图像质量来优化图像资源。

您也可以在线使用免费工具：

http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/

Answer 2

该网站使用巨大的透明PNG来实现视差效果，因此：

• 您必须减少图像的总重量：如果尚未将这些PNG转换为PNG-8，您可以尝试将其转换为PNG-8。量化算法等可以很好地将图像缩小到256色而不会降低质量。
• 你要保持视差效果的透明度。两种类型的透明度都与PNG-8兼容：每个像素上的透明度为GIF类不透明/透明位，而“PNG-32”类似（PNG-24 + 8位透明度），其中每个像素具有256级透明度。 Adobe Fireworks特别擅长创建这样的“PNG-8 + alpha”图像;转换器也存在，但它们并不完美（取决于你的图像）。
• 加载立即看到的图像的最小部分，只有在9600px宽的其余部分（！）之后才能大大减少第一次查看的时间。您可以通过将图像分割为1920或2560px的块来实现这一点，将3个图像的已查看部分作为背景图像加载，并通过仅在DOM ready加载所有其他部分后才会执行的脚本。没有太多的部分，因为这意味着更多的资产下载，但仍然不是4MB精灵:)奖金：通过将你的3个图像切成PNG-8，每个PNG将有自己的256色调色板，整体质量会更好（不是与PNG-24一样完美，但优于单个9600px PNG-8，总共只能使用256种颜色。男士的更多灰色适合一个PNG，球棒分子的颜色更加闪亮等等< / LI>

编辑：并且不要试图在智能手机上加载它！我喜欢媒体查询并避免UA检测，因为它大部分时间都不需要而且永远不会完美，但这是其中一种情况（选择加载8MB图像），欢迎使用它...忽略那些不喜欢的用户有光纤并且不会等待您的网站显示是与您的问题无关的另一个问题。