使用 base64 字符串代替图像减少 http 请求的基准
我正在考虑将当前设置为 css 中图像文件的图像源替换为 base64 字符串。浏览器不需要进行多次调用（一次调用 CSS 文件，然后调用每张图像），base64 嵌入意味着所有图像都嵌入到 CSS 文件本身中。
所以我目前正在研究引入这个。不过，我有一个问题想要一些建议，这是这种方法的一个已知问题。在我的测试中，base64 编码的字符串图像的大小约为常规图像的 150%。这意味着它无法用于大图像。虽然我不太关心较大的图像，但我不确定何时应该或不应该使用它。
是否有我应该使用的基准，例如如果 base64 大于 150% 我不应该使用它等等？
其他人对此有什么看法？您自己的经验可以帮助您决定何时使用或不使用它？
I am looking at replacing source of my images currently set to a image file in my css to a base64 string. Instead of the browser needing to make several calls, one for the CSS file and then one for each image, base64 embedding means that all of the images are embedded within the CSS file itself.
So I am currently investigating introducing this. However I have an issue I would like some advice on, a known problem with this approach. That is in my tests a base64 encoded string image is somewhere around 150% the size of a regular image. This means it’s unusable for large images. While I am not too concerned regarding larger images, I am not sure when I should and shouldn't use it.
Is there a benchmark I should use, as in if the base64 more than 150% larger I should not use it etc?
What are others views on this and what from your own experiences may help with the decision of when to and not to use it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
Base64 编码始终每 3 个输入字节使用 4 个输出字节。它的工作原理是使用每个输出字节的 6 位，映射到可以安全使用的字符。因此，您总是会看到任何使用 Base64 编码的内容都会增加 133%，四舍五入为最后一个 4 字节块。您可以使用 gzip 压缩您的响应来弥补部分损失。
Base64 encoding always uses 4 output bytes for every 3 input bytes. It works by using essentially 6 bits of each output byte, mapped to characters that are safe to use. So you'll always see a consist 133% increase for anything you base64 encode, rounded up for the last chunk of 4 bytes. You can use gzip compression of your responses to gain some of this loss back.
这仅适用于少数浏览器。我不会推荐它。特别是对于移动浏览器。
如果您正确配置网络服务器，图像会缓存在浏览器上。因此，图像不会被一遍又一遍地下载。它们来自缓存，因此速度超快。您可以在网络服务器上执行各种简单的性能配置，以通过 CSS 中嵌入的图像的 base64 编码来完成此操作。
看看这个，了解一些提高网站性能的简单方法：
http://omaralzabir.com/making_best_use_of_cache_for_high_performance_website/
This works in only handful of browsers. I would not recommend it. Especially for mobile browsers.
Images get cached on browser if you configure webserver properly. So, images don't get downloaded over and over again. They come from cache and thus super fast. There are various easy performance configuration you can do on your webserver to make this work over the base64 encoding of images embedded in CSS.
Take a look at this for some easy ways to boost website performance:
http://omaralzabir.com/making_best_use_of_cache_for_high_performance_website/
希望您能够提供压缩后的 HTML 和 CSS 文件。我在 JPEG 照片上进行了测试：我对其进行了 base64 编码和 gzip 压缩，结果非常接近原始图像文件大小。所以没有区别。
如果您做得正确，那么使用 Base64 编码时，您最终会每页请求数减少，但页面大小大致相同。
问题出在更改某些内容时的缓存。假设您在一个 CSS 文件中嵌入了 10 个图像。如果您对 CSS 样式或任何单个图像进行任何更改，用户需要再次下载包含所有嵌入图像的整个 CSS 文件。您确实需要判断一下这是否适合您的网站。
You are hopefully serving your HTML and CSS files gzipped. I tested this on a JPEG photo: I base64 encoded and gzipped it and the result was pretty close to the original image file size. So no difference there.
If you're doing it right, you end up with less requests per page but with approximately the same page size with base64 encoding.
The problem is with caching when you change something. Let's say you have 10 images embedded in a single CSS file. If you make any change to the CSS styles or to any single image, the users need to download that whole CSS file with all the embedded images again. You really need to judge yourself if this works for your site.
Base64 编码需要非常接近原始字节数的 4/3，因此相当数量小于 150%，更像是 133%。
我只能建议您自己进行基准测试，看看更复杂的方法是否可以更好地满足您的特定需求，或者坚持规范是否可以更好地满足您的需求。
Base64 encoding requires very close to 4/3 of the original number of bytes, so a fair amount less than 150%, more like 133%.
I can only suggest that you benchmark this yourself and see whether your particular needs are better satisfied with the more complex approach, or whether you're better served sticking with the norm.