优化图像加载时间。 （想法不同）
我创建了一个交互式图像...但加载时间有点太长。
交互式图像位于：
southernwindowdesign.com
它使用 5 个图像来逐步执行每个状态（通过单击和拖动）。我想保持图像的高质量；因此，任何进一步的 jpeg 压缩都不再适用（包括 punypng 和 smush.it）。
有什么减少加载时间的想法吗？我愿意尝试使用数据 URI、canvas、PNG 压缩（酷） 等。
任何想法或指针都会有帮助。
更新： 感谢所有提供建议的人，如果我使用了您提供的建议，我就给您加一分。 我已经设置了另一个静态子域 (s2)，它应该在接下来的几个小时左右传播。今天晚些时候，我可能会将一些图像切换到这个新的子域。 我还更改了图像的加载顺序，并在各处进行了一些其他优化。
我希望有人知道一种方法来利用每个图像中的冗余像素。有没有一种方法可以将所有图像编码到一个文件中，并使用 javascript 的 canvas 的 getImageData() 以某种巧妙的方式将它们读出？
我在 http://www.eswd.com/southern/test.jpg< 上尝试了 getImageData 方法/a> 由于 jpeg 的无损性（质量 = 100 != 100%），得出以下结果： http://www.eswd.com/southern/test.aspx。这可不行。使用相同的技术将图像保存为 PNG 会导致文件大小比包含所有数据的 jpeg 更大（无红色边框）。
我正在考虑尝试使用 .APNG 并以这种方式读取像素数据...但由于该格式尚处于开发早期，因此它似乎根本不会缩小文件大小...而且我'我不确定画布是否能让我读取动画中的各个 PNG 帧。
I've created an interactive image thing...but it takes a little too long to load.
The interactive image thing is located at:
southernwindowdesign.com
It uses 5 images to step through each state (by clicking and dragging). I want to keep the images high-quality; so, any further jpeg compression is out (including punypng and smush.it).
Any ideas for reducing the load time? I'm willing to venture into using data URIs, canvas, PNG compression (cool), etc.
Any ideas or pointers at all will be helpful.
UPDATE:
Thanks to everyone who gave advice, if I used the advice you gave, I gave you a plus one.
I've set up another static subdomain (s2) which should propagate over the next few hours or so. Later today I'll probably switch some of the images to this new subdomain.
I've also changed the order images are loaded and made some other optimizations here and there.
I was hoping someone knew of a way to take advantage of the redundant pixels in each image. Is there a way to encode all the images into one file and read them out using javascript's canvas's getImageData() in some clever way?
I tried a getImageData approach on http://www.eswd.com/southern/test.jpg which, because of jpeg's losslessness (Quality=100 != 100%), comes up with this: http://www.eswd.com/southern/test.aspx. which is no good. Saving the image as a PNG using the same technique resulted in a larger file size than a jpeg with all data (no red border).
I'm considering trying to work with .APNG and reading the pixel data that way...but because the format is so early in its development it doesn't seem like it would shrink the file size at all...and I'm not sure if canvas will let me read the individual PNG frames in the animation.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
整个页面加载会产生 40 个 http 请求，其中包括大约 20 个徽标图像请求，以及在门滑动图像之前加载的图像请求。精灵化其他 20 张图像。然后，直到 main.js 加载后，门滑动图像才会加载。该文件只有 1kb — 您可能不会从缓存它中获得太多好处。我认为您应该尝试在页面中内联该脚本，以便它可以更快地加载门滑动图像。
您应该使用 Firebug net panel 或 HttpWatch 之类的工具来查看资源加载的瀑布图，以优化请求，以便尽快加载门滑动图像。阅读Firebug 网络面板上的这篇文章以确保您使用的版本可以为您提供最准确的计时。
The whole page loading makes 40 http requests, including about 20 image requests for logos and such that load before your door sliding images. Sprite those other 20 images. Then the door sliding images don't load until after main.js has loaded. That file is only 1kb--you probably don't get much benefit from caching it. I think you should try inlining that script in the page, so it can load the door sliding images sooner.
You should use a tool like Firebug net panel or HttpWatch that lets you see a waterfall chart of resources loading to optimize the requests so that the door sliding images load as soon as possible. Read this post on the Firebug net panel to make sure you are using versions which give you the most accurate timing.
制作一张用作精灵的图像？
http://www.alistapart.com/articles/sprites/
Make one image you use as a sprite?
http://www.alistapart.com/articles/sprites/
您可以做很多事情。
对我来说，第一次加载 HTML 本身大约需要 7 秒——大约是总时间的一半。
您可能希望关注感知的性能。对于大图像，一种想法是将它们加载到页面 OnLoad 处理程序中，这样它们就不会延迟渲染页面其余部分所需的时间。
除了精灵之外，您还可以将图像分割到多个子域中以提高下载并行性。
一件小事：您可以删除 .ico 文件的元标记。现在的情况是，这是最先加载的图像之一；这不是优先事项，所以可以等待。
另外，loading.gif 动画 gif 在step1.jpg 到step5.jpg 之后加载。如果你确实需要它，你应该先加载它。
如果有帮助的话，我在书中写了一整章关于这些类型的优化，包括如何控制图像加载顺序等： 超快 ASP.NET。
There's a lot you can do.
For me, the HTML by itself took about 7 seconds to load the first time -- about half the total time.
You might want to focus on perceived performance. For the large images, one idea is to load them in the page OnLoad handler, so they don't delay the time it takes the rest of the page to be rendered.
In addition to sprites, you can also split the images among multiple subdomains to increase download parallelism.
One minor thing: you could remove the meta tag for the .ico file. The way it is now, that's one of the first images loaded; it's not a priority, so it can wait.
Also, the loading.gif animated gif is loaded after the step1.jpg to step5.jpg. If you really need it, you should load it first.
In case it helps, I wrote a whole chapter in my book about these types of optimizations, including how to control image load order, etc: Ultra-Fast ASP.NET.
我寻找了几种要应用的图像内容优化，但唯一满足您要求的是基本门图像， http://s.southernwindowdesign.com/i/home/animateDoor2/step1.jpg 请注意，网页上的底部条带被遮盖了。那可以被剪掉。但它不会节省超过几个字节。
I looked for several image content optimizations to apply, but the only one which meets your requirements is the base doors image, http://s.southernwindowdesign.com/i/home/animateDoor2/step1.jpg Notice that the bottom strip is covered up on the web page. That could be cropped off. It's not going to save more than a few bytes though.