在CSS中使用图像文件与数据URI

Question

我正在尝试确定包含我编写的脚本所需图像的最佳方法.

我发现了这个网站,它让我考虑尝试这种方法将图像作为数据URI(由RFC 2397定义)包含,因为它太小了 - 它是1x1像素50%不透明度png文件(用于背景) - 它最终为2,792字节作为图像,而3,746字节作为CSS中的文本.

那么这会被认为是好的做法,还是会不必要地混乱CSS呢？

Answer 1

使用数据URI而不是图像是有充分理由的.

数据URI是基于64位编码的,这意味着它比图像大约25%.但是,您的CSS文件可以缓存,因此小尺寸增加可能不是一个大问题.

如果您有很多图像,那么在查找每个图像时都会产生开销,无论是名称解析还是将图像作为另一种资源.

所有这些意味着,如果图像很小,并且整个CSS文件仍然很小,并且CSS在经常被点击的页面之间共享,那么如果切换到数据URI,则可以获得性能.

缺点是它们只适用于FX,Chrome等.部分工作在IE8中,但仅适用于小图像.它们根本不适用于IE7或更低版​​本.

Answer 2

我认为你不会获得太多...并且如果它是文件图像，浏览器可以缓存它。除非你确实需要它，否则我不会费心使用 CSS 来实现它。