Html 使用base64编码图像的优缺点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11736159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Advantages and disadvantages of using base64 encoded images
提问by zozo
I am thinking of using base64 encoded images for a site I am working on to optimize the load time.
我正在考虑将 base64 编码的图像用于我正在处理的站点以优化加载时间。
Anyways, before I start, I was wondering: what are the advantages and disadvantages of doing this?
无论如何，在我开始之前，我想知道：这样做的优点和缺点是什么？
At the moment, I don't see any disadvantage but also I noticed that it is not a technique used very often and that makes me wonder if I didn't miss something.
目前，我没有看到任何缺点，但我也注意到它不是一种经常使用的技术，这让我想知道我是否没有遗漏一些东西。
After googleing the subject I didn't find anything clear so I decided to ask here.
在谷歌搜索这个主题后，我没有找到任何明确的内容，所以我决定在这里问。
回答by PhonicUK
It's only useful for very tiny images. Base64 encoded files are larger than the original. The advantage lies in not having to open another connection and make a HTTP request to the server for the image. This benefit is lost very quickly so there's only an advantage for large numbers of very tiny individual images.
它仅对非常小的图像有用。Base64 编码的文件比原始文件大。优点在于不必打开另一个连接并向服务器发出 HTTP 请求以获取图像。这种优势很快就会消失，因此只有大量非常小的单个图像才有优势。
回答by vimist
the actual length of MIME-compliant Base64-encoded binary data is usually about 137% of the original data length, though for very short messages the overhead can be much higher due to the overhead of the headers. Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers).
In other words, the size of the decoded data can be approximated with this formula:
符合 MIME 的 Base64 编码二进制数据的实际长度通常约为原始数据长度的 137%，但对于非常短的消息，由于标头的开销，开销可能会高得多。粗略地说，Base64 编码的二进制数据的最终大小等于原始数据大小的 1.37 倍 + 814 字节（对于标头）。
换句话说，解码数据的大小可以用这个公式来近似：
bytes = (string_length(encoded_string) - 814) / 1.37
回答by Anmol Saraf
Some of downsides as below are already mentioned in this post at How much faster is it to use inline/base64 images for a web site than just linking to the hard file?
下面的一些缺点在这篇文章中已经提到，在网站上使用内联/base64 图像比仅仅链接到硬文件要快多少？
- Most forms of caching are beaten which could hurt a lot if the image is viewed often - say, a logo that is displayed on every page, which could normally be cached by the browser.
- More CPU usage.
- 大多数形式的缓存都被打败了，如果经常查看图像，这可能会造成很大伤害 - 例如，显示在每个页面上的徽标，通常可以由浏览器缓存。
- 更多的 CPU 使用率。
回答by Techmaster
also the response time of the HTML page will increase, because images loads asyn in normal scenario. even if images loads late you can start seeing text.
HTML 页面的响应时间也会增加，因为图像在正常情况下加载异步。即使图像加载较晚，您也可以开始看到文本。
Another advantage of CDN would lost if only media is being cached in CDN
如果 CDN 中仅缓存媒体，则 CDN 的另一个优势将丧失
that advantage will be lost.
将失去这种优势。
