HTML大的图像性能问题

Question

我试图让一个生病的滑块这样http://learnlakenona.com/

，但我有镀铬的主要性能问题（似乎他们的网站甚至不运行在Chrome的滑块）。我通过在div上使用background-image CSS来显示图像，将它们添加为img标签导致更多滞后。

我禁用了所有的javascript，并注意到我仍然有一些巨大的图像坐在海誓山盟之上只是滞后。

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

有没有人有一个想法，我可以得到像这样的滑块可以接受的性能！？ （图片需要很大）

Answer 1

该网站使用巨大的透明PNG图像的视差效果，所以：

• 你必须减少总重量你的图片：你可以尝试将这些PNG转换为PNG-8，如果它们还没有的话。量化算法等在将图像减少到256色方面做得非常好，而没有太多质量下降。
• 你必须保持对视差效果的透明度。两种类型的透明度都与PNG-8兼容：每个像素都具有GIF类似透明度，透明度类似于“PNG-32”（PNG-24 + 8位透明度），每个像素具有256级透明度。 Adobe Fireworks特别擅长创建这种“PNG-8 + alpha”图像;转换器也存在，但它们并不完美（取决于您的图像）。
• 加载您立即看到的图像的最小部分，并且稍后您的9600像素宽（！）的其余部分将大大减少首次查看的时间。您可以通过以1920或2560像素块对图像进行切片，将3个图像的查看部分加载为背景图像并通过脚本执行，该脚本仅在DOM加载所有其他部分后才会执行。没有太多的部分，因为这意味着更多的资源下载，但仍然不是一个4MB的精灵:)奖金：通过将你的3个图像切片为PNG-8，每个PNG将拥有自己的256色调色板，整体质量会更好像PNG-24一样完美，但比9600像素的PNG-8更好，它只能使用256种颜色，在一个PNG中更适合男士服装的灰色阴影，更棒的球形和棒状分子的颜色等

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

Answer 2

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

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

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