Base64 uri 将图像编码为 css 文件可防止额外请求并加快页面加载速度。
假设您不必支持不支持 base64 uri 的旧 IE。
使用 base64 的最佳策略是什么，我倾向于对小于 8KB 的文件进行编码。但为什么不把所有东西都编码呢？
问问题
1091 次
3 回答
4
将所有内容作为 base64 内联图像发送的一些问题：
- 如果您的图像在多个地方使用，则内联它可以防止缓存使用
- base64 编码比二进制发生更多（大约三分之一）
- 浏览器会尽快开始渲染，如果您的 CSS 甚至包含主页不需要的图像，则会使渲染速度变慢
- 即使请求较少通常是好的，但有几个请求并没有那么糟糕，因为浏览器会使它们并行
- 当您考虑在所有页面上使用的一组小图像时，会有更好的优化，特别是如果它们共享相同的调色板：精灵
- 您可能比图像更频繁地更改 CSS。只有一个文件意味着每次更改时都必须重新下载所有内容。没有很好地使用缓存。
你可以坚持你今天的政策（只要你不在css中内联你作为与其他地方分开的文件调用的图像，比如HTML），但我个人认为正确配置缓存参数和精灵的功能不太强大。
于 2013-03-27T16:05:04.490 回答
0
（我假设您正在谈论将图像嵌入到外部 .css 文件中。）
这是一个选项，如果：
- 没有太多这样的图像
- 图片很小
- 图像适用于几乎所有包含 CSS 的页面
这是一个糟糕的选择，因为：
- 图像可能很大，文件可能很容易快速增长到几兆字节
- 图像的 base64 编码比原始二进制更大
- 它强制客户端一次下载所有图像，这可能没有必要（见上面的第三点）
- 它不允许客户端单独管理缓存文件；即它不能在保留小的CSS文件的同时丢弃大的图像文件，可能会迫使它很快再次一起下载
于 2013-03-27T16:07:28.500 回答
-1
Base64 URL 可能会阻止额外的请求，但它也会显着增加所涉及图像的大小，因此减少一个请求的性能优势可能会被总下载大小中的额外权重所抵消
减少请求数量可能是个好主意，但这并不是影响您网站性能的唯一因素。事实上，对于大多数网站来说，它可能在列表中相对较低。
此外，如果图像或您的 CSS 发生变化，那么将它们全部放在一个文件中实际上对已经访问过您网站的人不利，因为必须将整个内容从缓存中丢弃并重新加载。如果它们是单独的文件，则在更改时只需要重新加载其中一个。同样，您正在增加所需的下载总量。
不要盲目尝试优化；使用站点性能分析工具来确定您的特定瓶颈在哪里，并首先解决最重要的瓶颈。
于 2013-03-27T16:07:35.020 回答