优化图像加载时间。（想法不同）答案

【问题标题】：Optimizing image load times. (thinking differently)优化图像加载时间。（想法不同）
【发布时间】：2009-12-18 03:58:33
【问题描述】：

我创建了一个交互式图像的东西...但是加载时间太长了。

交互式图像的东西位于：

southernwindowdesign.com

它使用 5 张图像来逐步浏览每个状态（通过单击和拖动）。我想保持图像的高质量；因此，任何进一步的 jpeg 压缩都已结束（包括 punypng 和 smush.it）。

有什么减少加载时间的想法吗？我愿意冒险使用数据 URI、画布、PNG compression (cool) 等。

任何想法或建议都会有所帮助。

更新： 感谢所有给出建议的人，如果我使用了你给出的建议，我给了你一个加分。我已经设置了另一个静态子域 (s2)，它应该在接下来的几个小时左右传播。今天晚些时候，我可能会将一些图像切换到这个新的子域。我还更改了加载图像的顺序，并在这里和那里进行了一些其他优化。

我希望有人知道如何利用每张图像中的冗余像素。有没有办法将所有图像编码到一个文件中，并以某种巧妙的方式使用 javascript 画布的 getImageData() 将它们读出？

我在http://www.eswd.com/southern/test.jpg 上尝试了getImageData 方法，由于jpeg 的无损（质量=100 ！= 100%），得到了这个：http://www.eswd.com/southern/test.aspx。这不好。使用相同的技术将图像保存为 PNG 会导致文件大小大于包含所有数据的 jpeg（无红色边框）。

我正在考虑尝试使用 .APNG 并以这种方式读取像素数据...但由于该格式处于开发的早期阶段，它似乎根本不会缩小文件大小...而且我不确定画布是否可以让我读取动画中的各个 PNG 帧。

【问题讨论】：

FWIW，我知道你说任何进一步的压缩都已经结束了......但我真的认为你的 jpg 文件比他们需要的要大得多。我能够从 step1.jpg 单独保存近 370k，没有明显差异。（Photoshop CS2，保存到网络 60%，良好的眼睛，伽马校准，环境照明等）我相信你也可以从其他显示图像中减少很多。只是需要推送大量数据。
我同意 zen - 第一张图片 (541kb) 我花了 3 秒时间加载。

标签： javascript optimization canvas lossless-compression

【解决方案1】：

整个页面加载发出 40 个 http 请求，包括大约 20 个徽标图像请求，并且在您的门滑动图像之前加载。 Sprite 其他 20 张图像。然后在加载 main.js 之后才加载门滑动图像。该文件只有 1kb ——您可能不会从缓存它中获得太多好处。我认为您应该尝试在页面中内联该脚本，以便它可以更快地加载门滑动图像。

您应该使用像 Firebug 网络面板或 HttpWatch 这样的工具，让您看到资源加载的瀑布图来优化请求，以便尽快加载门滑动图像。阅读this post on the Firebug net panel 以确保您使用的版本能够为您提供最准确的时间。

【讨论】：

徽标在网站的其他地方使用，这就是它们分开的原因。我会延迟加载那些在页面加载时无法加载的内容。
徽标是否用于其他地方无关紧要。如果您将“其他 20 张图片”作为精灵加载，它会被缓存，并在整个站点中随意重用。

【解决方案2】：

制作一张您用作精灵的图像？ http://www.alistapart.com/articles/sprites/

【讨论】：

【解决方案3】：

你可以做很多事情。

对我来说，HTML 本身第一次加载大约需要 7 秒——大约是总时间的一半。

您可能希望专注于感知性能。对于大图像，一个想法是在页面 OnLoad 处理程序中加载它们，这样它们就不会延迟呈现页面其余部分的时间。

除了精灵，您还可以在多个子域中拆分图像以增加下载并行度。

一件小事：您可以删除 .ico 文件的元标记。现在的方式，这是第一个加载的图像之一；这不是优先事项，所以可以等待。

另外，loading.gif 动画 gif 是在 step1.jpg 到 step5.jpg 之后加载的。如果你真的需要它，你应该先加载它。

如果有帮助，我在书中写了一整章介绍这些类型的优化，包括如何控制图像加载顺序等：Ultra-Fast ASP.NET。

【讨论】：

HTML 加载需要 7 秒？它只有 6kb，对我来说只用了 147ms，所以我认为没有服务器问题。
也许是 DNS？第二次，在 IE 中而不是 FF 中，它要快得多，尽管我的 ISP 使用透明代理，所以这可能就是原因。现在刚刚做了几次cntl-refreshes，它在IE中从大约0.5到2秒不等。我在新西兰使用 11 Mbps DSL 线路。顺便说一句，您的内容是用 deflate 而不是 gzip 压缩的：好久没看到了！
听起来不错。我已经摆脱了加载图像和网站图标（它曾经是一个 png，它是由元存在的）。因为这篇文章，我使用 deflate：stackoverflow.com/questions/1574168/…

【解决方案4】：

我寻找了几个要应用的图像内容优化，但唯一满足您要求的是基本门图像，http://s.southernwindowdesign.com/i/home/animateDoor2/step1.jpg 请注意，底部条带在网页上被遮盖了。那是可以剪掉的。不过，它不会节省超过几个字节。

【讨论】：