Javascript base64编码的图像是否比intranet中的常规图像更好？

在我的公司，我们有一个内部网，我们的品牌网络文件总共有20个小的图像（基本上是图标）和一堆js和css文件。我想尝试充分优化性能。我已经完成了所有的基本技巧，比如缩小和合并。但是现在对于图像，我想知道什么是最好的方法，因为它是一个具有快速内部下载速度（快速广域网）和双核i7计算机的内部网。此外，其主要6个办事处遍布加拿大和美国

我想到了一种方法，我使用一个工具来自动转换每幅带有base64编码的图像，然后将它们放入js或css文件中。然后使用该工具将css填充到js文件中。现在我只剩下1个js文件，其中包含所有css和base64字符串，其大小约为350KB。另外，由于它是1个js文件，所以可以在服务器端和客户端缓存它

有人知道这有什么优点和缺点吗？还有什么可以做得更好

---

谢谢

使用base64并不是真的要压缩图像，它只是使图像不依赖于文件。它实际上使图像更大

节省图像空间的一个好方法是使用sprite表，并使用在线图像压缩器压缩图像

---

我建议只使用图像本身。如果你必须的话，也许可以压缩它们

20个图像，在高速intranet中的总大小为350KB

在这种特殊情况下，您在优化上花费的时间似乎比它在最终结果中可能获得的好处更多

如果您想将其归结为单个http请求，请获取一个php文件，将其转换为base64数据URL，并将其嵌入到源文件中

您也可以使用JSON文件并通过JS加载它。在那里你会有延迟加载图像的效果

---

在我看来，这种情况下最好的是普通的

img

标签

不要将css放在js中，这将比“正常”执行慢，因为css在主体加载之前应用，并且您不想等待js在该时间段中发送+解析…我理解，让浏览器将所有css代码插入dom需要额外的工作，但这意味着http get请求减少了1个，在我的i7机器上，我认为最终用户不会注意到与加载外部css文件的区别。http在lan上速度非常快，因此没有理由争取“减少1个http get请求”。这与CPU无关，而是与您要并行处理的长优化呈现管道有关，这会导致多个额外的页面布局步骤，这些步骤甚至可能在并行处理中可以注意到。除此之外，您不能像那样注入任何/所有CSS，因为它会破坏相对路径。DataURL为每个图像增加了33%的额外权重，这可能会抵消与reg图像相比额外的头数据包。然后是维护噩梦每次主题调整。。。简而言之，如果这个方案是值得的…DATOLS不缓存，所以你必须每次都传输整个图像信息，而不是仅仅弹跳（ETAG）或者根本没有任何东西（远的将来到期）。数据流的一个很酷的事情是，它可以很容易地保存页面离线查看，如果这很重要的话…@dandavis如果dataURL嵌入HTML文件，它不会缓存，但是在我的例子中，它们都包含在一个JS文件中，JS文件可以缓存在服务器端和客户端。我很满意总图像大小是1.3倍，因为总图像大小非常小。另外，由于它是一个带有i7机器的内部网，下载速度非常快，因此1.3倍的下载速度非常轻。然而，我想知道它是否值得降低的HTTP GET请求？个人来说，我不相信，HTML实际上会有更高的响应时间，但是根据系统的声音，这可能是第二个LOL的一部分，所以这取决于您对文件结构的偏好。所有的dataURL都在一个JS文件中，JS文件可以缓存在服务器端和客户端。除了对JS文件的引用之外，HTML文件中没有任何内容是硬编码的。请不要引用我的话，但是JS是否仍然需要在HTML中呈现（缓存在JS文件中或不缓存），这仍然会增加每个图像的页面负载。与将图像缓存在自身或sprite表中不同。是的，从客户端进行渲染需要更多的工作，但我认为所有这些都会运行得比用户使用这些i7机器所能注意到的更快。