非常大的PNG图像动画优化

Question

我有3个大（7000px宽）透明PNG图像，从左到右动画。表现不是太差，但不是很好。

我需要帮助优化这些图像，以便使jquery动画流畅。

我尝试将它们全部分成切片（因此每个背景有10个单独的PNG），这有帮助，但仍然是安静的波涛汹涌。

Answer 1

最好将它作为一个图像，这样你的浏览器只执行一个http请求来获取图像，并且图像可以被更好地压缩，并且比将它分成7个并压缩每个图像更轻，因为它们之间会有冗余数据。

对于优化png的程序，而不是粘贴链接，我会给你两个问题，其中一些：

• https://stackoverflow.com/questions/1060763/image-optimizer-for-images-used-on-the-web-jpg-gif-and-png
• good image optimizer that can be used?

另请参阅此interesting article有关优化图像和最佳方法的信息。

Answer 2

您可以尝试使用CSS3 animations而不是使用jquery的animate，这样可以生成更流畅的动画。

来自Addy Osmani's Blog Post: CSS3 Transition Animations With jQuery Fallbacks：

  

过渡的好处是与基于JavaScript的动画不同，   它们在某些浏览器和移动设备中加速硬件，   导致整体动画可能比你更平滑   通常经历。