减少1000张图片的HTTP请求？
我知道这个问题可能听起来有点疯狂，但我坚信也许有人能想出一个聪明的主意：
想象一下，您在单个 HTML 页面上有 1000 个缩略图。
图像大小约为5-10 kb。
有没有办法在单个请求中加载所有图像？以某种方式将所有图像压缩到一个文件中......
或者您对此主题还有其他建议吗？
我已经知道的其他选项：
CSS sprites
延迟加载
设置过期标头
跨不同主机名下载图像
I know this question might sound a little bit crazy, but I tough that maybe someone could come up with a smart idea:
Imagine you have 1000 thumbnail images on a single HTML page.
The image size is about 5-10 kb.
Is there a way to load all images in a single request? Somehow zip all images into a single file…
Or do you have any other suggestions in the subject?
Other options I already know of:
CSS sprites
Lazy load
Set Expire headers
Downloads images across different hostnames
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
鉴于您的情况，我只能想到两个其他选项：
我认为最好的选择是延迟加载、使用过期标头进行缓存以及从多个主机名提供图像的组合。
如果图像可以按逻辑分组，那么除了上述所有内容之外，CSS 精灵也可能适合您。例如，如果您的缩略图是在某一天上传的图像...您可以为每天创建一个文件，然后将其缓存在用户浏览器上。
There are only two other options I can think of given your situation:
I think your best bet is a combination of lazy loading, caching with expires headers and serving images from multiple hostnames.
If the images can be grouped logically, CSS sprites may also work for you in addition to everything above. For example, if your thumbnails are for images uploaded on a certain day...you may be able to create a single file for each day which could then be cached on the users browser.
这是通过使用所谓的 CSS sprite 来完成的；包含所有其他图像的单个图像，以及 css 选择的 html 中所需的特定部分。
请参阅 http://css-tricks.com/css-sprites 上的教程
This is done by using what's called a CSS sprite; a single image with all the other images inside it, with the particular part that's wanted in the html selected by css.
See one tutorial at http://css-tricks.com/css-sprites
听起来你想要像 SPDY 的 服务器推。当客户端请求 HTML 页面（或第一个图像）时，SPDY 允许服务器推送其他资源，而无需等待更多请求。
当然，这仍然是实验性的。
It sounds like you want something like SPDY's server push. When the client requests the HTML page (or the first image), SPDY allows the server to push the other resources without waiting for more requests.
Of course, this is still experimental.
您可以尝试使用 imagemagick 的 montage 命令来创建单个图像。
You could try the montage command of imagemagick to create a single image.