我正在使用带有背景图像的透明1x1图像,以便能够使用精灵并仍然为某些图标提供替代文本。
我想为图像使用数据URI来减少HTTP请求的数量,但是生成透明图像的最小可能字符串是什么?
我意识到我可以使用数据URI:s来表示实际图像而不是精灵,但是当所有内容都保存在CSS中而不是分散时,它更容易维护。
使用不同的透明GIF后,有些不稳定会引起CSS故障。例如,如果你有一个<img>
并且你使用最小的透明GIF,它可以正常工作,但是,如果你想要你的透明GIF有一个background-image
,那么这是不可能的。出于某种原因,某些GIF(例如以下内容)会阻止CSS背景(在某些浏览器中)。
更短(但不稳定 - 74字节)
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
我建议使用稍长且更稳定的版本,如下所示:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
作为另一个提示,不要像一条评论所暗示的那样省略image/gif
。这会破坏几个浏览器。
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E
最终的长度取决于它的内容。
我认为它必须是压缩透明的1x1 GIF文件(82字节):
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
最小的PNG - 114字节:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
This guy通过GIF规范解决了这个问题。他对transparent.gif
的解决方案是37字节:
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
首先去除透明度,然后是颜色表......
89a
。3B
的单字节(ASCII中的;
)表示GIF的结束。基于透明GIF所需的结构,事实证明43字节非常接近您可以获得的最小值。
但是,我设法找出一个让它变得更小的技巧。标准中提到可以选择使用全局颜色表。当然,关于在没有颜色表的情况下制作GIF时会发生什么,这是未定义的。
但是,如果将颜色表索引定义为透明,则GIF解码器似乎并不关心实际上没有颜色表。
所以我更改了逻辑屏幕描述符以指示没有全局颜色表并删除了表本身,总共保存了6个字节,使文件大小减少到仅仅37个字节。
有趣的是,Wordpress给了我一个可爱的GD错误消息列表抱怨这不是一个有效的GIF文件,尽管Firefox和GIMP都打开并显示(它是透明的“显示”吗?)文件正好。
为了使它更小,我查看了图像中最大的剩余“可选”块,图形控件扩展。如果您不需要透明度,则不再需要此块,这是您可以带走的另外8个字节。
资料来源:The Tiniest GIF Ever。
您可以尝试以下SVG数据(60个字节):
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>
独立的svg文件看起来像(62字节):
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>
也可以看看:
我正在使用以下数据uri来获得一个空图像://:0
这是我找到的最小的(26个字节):
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
对于空图像:
data:null
(它将翻译成src=(unknown)
)