在 .png 图像中发送信息，然后通过 javascript 提取它？答案

【问题标题】：Send Information inside a .png image then extract it through javascript?在 .png 图像中发送信息，然后通过 javascript 提取它？
【发布时间】：2013-03-04 19:27:29
【问题描述】：

在谷歌搜索了一段时间后，我的问题没有任何运气或指导。

我希望能够使用 javascript、ajax 加载网站，以减少服务器需要来自客户端的请求数量。我的目标是在图像中嵌入/编码数据，这样只有客户端需要通过 ajax 调用请求该图像，然后解码以找到所需的 js、css 和其他文件。然后将js、css等文件插入到DOM中。

如果我可以实现上述操作，那么我可以在如何加载我的 web 应用程序方面有很大的灵活性，并且能够通知用户 web 应用程序有多接近可以查看。

目前我的问题是我找不到如何对图像中的数据进行编码。

即使这不是提供 web 应用程序的方式，我的好奇心也越来越强，我真的很想这样做。

任何指导或指示将不胜感激！

另外：我正在学习 Python，所以如果您知道我可以使用的 Python 模块，那将会很酷。目前我正在使用pypng 模块，看看是否可以这样做。

【问题讨论】：

嗯。这可能会导致比保存请求更多的开销（在客户端进行解码，流量，因为它会破坏缓存等）。只要缓存好，压缩你的 JS 和 CSS，并尽可能将图像放入 CSS sprites 中。这是大男孩所做的（例如，这个网站），它是最先进的
为什么要使用图片？为什么不使用单个 JavaScript 文件或 JSON 文档？
虽然您可以将 JS、CSS 编码为 PNG 图像，然后将其解码回来，但我怀疑这是否值得。是的，压缩率会足够高，但我不确定它是否会击败 GZIP。另外，我能看到的唯一方法是使用画布对其进行解码，这在旧 IE 版本中不起作用。
我认为，如果您将使用 .png 图像，那么它的大小会比没有它时消耗的要多..如果您真的想锻炼性能，那么最好看看在这些规则developer.yahoo.com/performance/rules.html 或查看 stevesouders.com
有时，“为什么我找不到任何相关信息？”这个问题的答案。是“因为其他尝试过的人都认为这不值得麻烦。”

标签： javascript jquery performance web-applications

【解决方案1】：

坦率地说。不要那样做。

地球上最聪明的人使用其他方法来减少请求数量和响应时间。最小化请求数量的最常用技术称为捆绑。简而言之，您只需将所有 js 文件一个接一个地复制粘贴到一个大 js 文件中，然后将所有 css 文件复制到一个大 css 文件中。这样就需要下载两个文件，一个js，一个css。比这更好的通常不值得麻烦。

为了进一步缩短响应时间，您通常会缩小 js 和 css 文件。这是一个删除所有空格、cmets 等并尽可能缩短内部变量名称的过程。

最后，您可以将 js 和 css 文件作为 gzip 文件提供，以进一步减小要传输的文件大小。

有许多工具可以为您进行捆绑和缩小。谷歌并选择一个适合您的其他工具支持的工具。

【讨论】：