将所有图片打包到服务器上的单个存档中并在客户端解包

Posted 2023-03-06

【中文标题】将所有图片打包到服务器上的单个存档中并在客户端解包

【英文标题】：Pack all pictures into single archive on server and unpack on client-side

【发布时间】：2011-08-13 23:14:09

【问题描述】：

那么，是否可以在服务器端创建存档（/二进制数组？）然后发送它+运行时生成的 html 页面。我认为是这样。并想知道是否有任何图书馆。尤其是客户端。

现在的核心问题是： 1.如何传输图片：作为js变量？喜欢var imagebinary = "3nmrnmfu5...." 2.如何将图像从二进制格式转回并粘贴到必要的地方。

现在我正在考虑使用 data: URL。

tomfumb 提出了一个谷歌使用的绝妙解决方案：一张“大”图片在客户端被截成小块。

【问题讨论】：

是的 - 例如，在 Opera mht 文件中。

但你到底想做什么？

有网络服务器（node.js，如果必要的话）。 Pages 上有很多图片，所以每张图片都会被单独查询。这是最好的情况 - 我会使用 keep-alive，但必须进行更多的磁盘查询，无论如何，在我看来，一个更大的答案比许多小的查询答案更适合服务器，对吗？跨度>

我以前从未看过它，但我认为 Web 浏览器不会知道如何处理来自服务器的此类响应，而只会将其下载到文件系统中。我认为您最好查看内容的缓存和压缩策略，以减少来自客户的独特请求。看看 Google 和 Facebook 如何处理大量流量（除了巨大的服务器场）。遵循标准，但尽可能提高效率。对于静态纯文本内容，使用 gzip / deflate 并告诉客户端在适当的地方进行缓存。使用 Fiddler 查看您的浏览器如何使用热门网站

我的意思是将它作为简单页面的一部分发送 - 例如在不可见的 div 中（甚至作为 js 变量） - 而不是使用 javascript 解包。当然还有缓存。现在对我来说核心问题是 - 如何进行这样的转换链：图像 -> 二进制 -> 图像（并将其放置在必须使用 js 的地方）。

【参考方案1】：

我认为您正在寻找的技术通常被称为“CSS Sprites”，并且在这个地方有很多关于它们的好文章（只需询问您最喜欢的搜索引擎）。还有其他方法使用 Javascript 代替，但我自己非常喜欢 CSS 方法。

有相当不错的文章在：

http://www.alistapart.com/articles/sprites

http://www.w3schools.com/css/css_image_sprites.asp

还有很多其他的。

想法是将所有图像组合成一张更大的图像，然后使用 CSS 来控制在任何特定情况下显示更大图像的哪些部分。

假设您有四个相同大小的图像，1,2,3,4（它们不必相同大小，但 它使解释更容易

使用您最喜欢的服务器端图像工具包将它们组合成一个更大的图像。如果您使用的是 Python，则可以使用 php 中的 GD、ImageMagick 或 PIL 之类的东西。大多数服务器端工具包都有一个可以组合图像的库。

1234

然后创建 CSS 规则，在客户端显示大图的相关部分：

例如：

div.sprite   height:100px; width:100px;  
#image1   background: url(bigimg.png) 0 0; 
#image2   background: url(bigimg.png) -100px 0; width: 100px;
#image3   background: url(bigimg.png) -200px 0; width: 100px;
#image4   background: url(bigimg.png) -300px 0; width: 100px;

以及显示它们的 HTML：

<div id='image1' class='sprite'></div> 
<div id='image2' class='sprite'></div> 
<div id='image3' class='sprite'></div> 
<div id='image4' class='sprite'></div>

这种事情自动化可能并不难。

【讨论】：

是的。这似乎正是我的意思。谢谢。