我创建了一个交互式图片的东西......但加载时间太长了。
交互式图像事物位于：
southernwindowdesign.com
它使用5个图像逐步浏览每个状态（通过单击并拖动）。我想保持图像的高品质;所以，任何进一步的jpeg压缩都会消失（包括punypng和smush.it）。
减少加载时间的想法？我愿意冒险使用数据URI，画布，PNG compression (cool)等
任何想法或指示都会有所帮助。
更新 感谢所有给出建议的人，如果我使用你给出的建议，我给你一个加号。 我已经设置了另一个静态子域（s2），它应该在接下来的几个小时左右传播。今天晚些时候，我可能会将一些图像切换到这个新的子域。 我也改变了加载图像的顺序，并在这里和那里做了一些其他的优化。
我希望有人知道如何利用每张图片中的冗余像素。有没有办法将所有图像编码成一个文件并使用javascript的canvas的getImageData（）以一种聪明的方式读出它们？
我在http://www.eswd.com/southern/test.jpg上尝试了一个getImageData方法，由于jpeg的无损（质量= 100！= 100％），因此提出了这个问题：http://www.eswd.com/southern/test.aspx。这不好。使用相同的技术将图像保存为PNG会导致文件大小大于带有所有数据的jpeg（没有红色边框）。
我正在考虑尝试使用.APNG并以这种方式读取像素数据......但由于格式在开发过程中如此早，所以看起来根本不会缩小文件大小......而且我不确定画布是否会让我阅读动画中的各个PNG帧。
答案 0 :(得分：7)
整个页面加载会产生40个http请求，包括大约20个徽标图像请求，以及在门滑动图像之前加载。用雪碧那些其他20张图片。然后，在装载main.js之后，门滑动图像才会加载。那个文件只有1kb - 你可能没有从缓存中获得太多好处。我认为您应该尝试在页面中内联该脚本，以便它可以更快地加载门滑动图像。
您应该使用Firebug网络面板或HttpWatch等工具，它可以让您查看资源加载的瀑布图以优化请求，以便尽快加载门滑动图像。阅读this post on the Firebug net panel以确保您使用的版本可以为您提供最准确的时间。
答案 1 :(得分：4)
制作一张用作精灵的图像？ http://www.alistapart.com/articles/sprites/
答案 2 :(得分：1)
你可以做很多事情。
对我来说，HTML本身第一次加载大约需要7秒钟 - 大约是总时间的一半。
您可能希望专注于感知性能。对于大图像，一个想法是在页面OnLoad处理程序中加载它们，因此它们不会延迟渲染页面其余部分所花费的时间。
除了精灵之外，您还可以在多个子域之间拆分图像以增加下载并行性。
一件小事：您可以删除.ico文件的元标记。它现在的方式，这是第一个加载的图像之一;它不是优先事项，所以它可以等待。
此外，在step1.jpg到step5.jpg之后加载了loading.gif动画gif。如果你真的需要它，你应该先加载它。
如果它有帮助，我在书中写了一整章关于这些类型的优化，包括如何控制图像加载顺序等：Ultra-Fast ASP.NET。
答案 3 :(得分：0)
我查找了几个要应用的图像内容优化，但唯一符合您要求的是基本门图像，http://s.southernwindowdesign.com/i/home/animateDoor2/step1.jpg请注意，网页上会覆盖底部条带。这可能会被裁掉。但它不会节省超过几个字节。
