减少1000个图像的HTTP请求？ [英] Reduce the HTTP Requests of 1000 images?

问题描述

我知道这个问题可能听起来有点疯狂，但我很难说也许有人可以提出一个明智的想法：

I know this question might sound a little bit crazy, but I tough that maybe someone could come up with a smart idea:

想象一下你有1000个缩略图一个HTML页面。

Imagine you have 1000 thumbnail images on a single HTML page.

图像大小约为5-10 kb。

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?

我已经知道的其他选项：

CSS sprites

CSS sprites

延迟加载

设置过期标题

下载不同主机名的图像

推荐答案

根据您的具体情况，我只能考虑其他两个选项：

There are only two other options I can think of given your situation:

1. 使用 data：协议并将缩略图的base64编码版本直接回显到HTML页面。我不建议这样做，因为你无法在用户浏览器上缓存这些图像。


2. 使用HTML5的Web存储将所有图像存储为记录，其中base64编码的图像数据存储为BLOB柱。数据库下载到用户计算机后，使用Javascript循环遍历所有记录，并使用jQuery等动态在页面上创建缩略图。使用此选项，您需要等到整个数据库在最终用户浏览器上完成下载，并且需要一个相当现代的浏览器。

我认为最好的选择是延迟加载，使用过期标头缓存和提供来自多个主机名的图像。

I think your best bet is a combination of lazy loading, caching with expires headers and serving images from multiple hostnames.

如果图像可以按逻辑分组，CSS除了以上所有内容之外，精灵也可能适合您。例如，如果您的缩略图用于某一天上传的图像...您可以为每天创建一个文件，然后可以在用户浏览器上缓存。

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.

这篇关于减少1000个图像的HTTP请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！