处理图像沉重的网页

Question

我有一个长约200个电视节目的列表。这些节目中的每一个都有一个小图像，40x60像素和3kB，并且它们都在同一页面上同时列出。

现在我开始认为，每次查看页面时，向服务器发送大约200次请求可能不是一个好主意。

什么是解决这样的事情的最佳方式，而不必偏离页面的图形设计？我应该使用某种“懒加载”使用JavaScript？我应该将所有这些都放在一个大的图像中，并使用一堆黑客CSS来使其只有一个请求？

Answer 1

我认为你可能有几个选项

• PAGINATE
• 通过JavaScript延迟加载
• CSS精灵
• 和/或CDN

分页是很常见的，我认为用户很好。延迟加载适用于每个JavaScript用户（几乎全部）。

可以通过一次抓20个例如制作一张大图像来实现拼图。我会说一次使用20，所以用户不必等待超大图像下载才能看到任何内容。

你可以使用PHP和GD抓住每个图像中20组，然后将它们拼合在一起，记录他们的偏移，然后将其打印样式表。

你的CDN应设不具有发送的cookie（不同的域名，或子域如果您的站点使用www）。您也可以配置此服务器以优化它以提供静态内容。

Wrikken also makes a good point关于发送远期到期标题（投票给他！）。不要忘记添加某种版本，以防需要更新图像，并且希望保留相同的文件名。

Answer 2

你最好的选择是分页你的清单。

如果你必须有一个网页上的所有项目，然后使用精灵会得到它归结为一个图像，并做到这一点（即不是一个真正的黑客）一个完全有效的方式。

Answer 3

对于静态，我建议在static.example.com子域上使用nginx之类的东西，这是一个非常轻量级的网络服务器，它可以用更少的开销为更多'传统'网络服务器提供图像。并设置适当的过期&缓存标题当然，访问您的网站的人应该有相当长的时间在缓存中的所有图像。

Answer 4

还有一个选项：你的CSS中的数据URI。基本上，你base64编码的图像，并将其直接粘贴到CSS文件。一个请求提供了CSS和所有的图像，整个事情可以克扣更多的节省。

缺点？ IE 5-7本身不处理data-uri（IE 8+确实支持这一点）。你可以通过使用两个版本的样式表（一个嵌入图像，一个没有）和apache选择哪一个来提供服务。另外，你也可以使用一个javascript解决方案，为旧的IE添加data-uri支持。

http://www.websiteoptimization.com/speed/tweak/inline-images/

对于Rails的人群中，有一个叫做Jammit的宝石，自动执行此操作。它会生成data-uri和常规版本，以及每个版本的压缩等效项。

Answer 5

我推荐使用200点的div与每个从一个单个图像文件加载它们的背景图像的那所有图像的条带连接在一起，翼CSS贴图

Answer 6

我想创建图像子画面和使用CSS像这样滚动-10px 30px在div中显示图像。 这是一个简单的基于web的精灵和CSS生成器http://spritegen.website-performance.org/

Answer 7

使用CSS精灵。所有图像的总体图像大小为600kb左右，这可能太大而无法一次加载，因此您可以将图像分成几个精灵，每个精灵大约100k。然后，您可以根据正在查看的内容确定其加载顺序的优先顺序。