在 CSS 中嵌入 Base64 图像是好还是坏做法？

在 CSS 中嵌入背景图像作为 Base64：好还是坏？

在 CSS 中嵌入背景图像数据作为 Base64 编码的技术引发了关于其优点的争论。下面深入分析其优缺点：

优点

• 减少 HTTP 请求：通过在 CSS 中嵌入图像，您无需额外的操作用于获取它们的 HTTP 请求，提高页面加载性能。
• Cookie 开销减少： 在 CSS 中嵌入图像可减少与图像请求一起发送的 cookie 产生的流量。
• 缓存和 GZIP 优化： CSS 文件可以使用 GZIP 进行缓存和压缩，从而最大限度地减少数量传输的数据量。
• IE6 兼容性： 此方法可以缓解后台缓存问题IE6 及更早版本中的图像。

缺点

• 单独缓存： 在 CSS 中嵌入图像会阻止它们与样式信息分开缓存，使得很难在不使整个 CSS 失效的情况下更新图像文件。
• 大图像：Base64 编码大图像或多张图像会大大增加 CSS 文件的大小，导致下载时间更长。
• 辅助功能：带宽限制或残疾的访问者可能会遇到加载速度较慢的情况。

工具Base64 编码

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp（上传）
• http://www.greywyvern.com/code/php/binary2base64（来自带有小教程的链接下面）

注意事项

Google 工程师 Bryan McQuade 警告说，CSS 中的数据 URI 可以被视为交付关键 CSS 的渲染阻塞反模式。这可能会在处理 Base64 编码图像时延迟页面内容的显示。因此，权衡潜在的好处和缺点并明智地使用该技术至关重要。对于小型静态图像，嵌入 CSS 可能是有益的，但对于较大或频繁更新的图像，通常首选外部引用。

以上是在 CSS 中嵌入 Base64 图像是好还是坏做法？的详细内容。更多信息请关注PHP中文网其他相关文章！