普通的html图片调用代码是这样的:
<img src="http://aisoa.cn/logo.png" />
或者css里这样调用
background-image:url("http://aisoa.cn/logo.png")
那么本文所说的base64要怎么用呢,把图片地址换成通过base64编码的图片代码即可,请看下面的代码:
使用下面的代码替换掉原图片地址即可。
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
比如这样使用
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="width:20px;border:solid 1px #999;" />
给图片做占位,有时可能会用到这种1个像素纯色的图片,这种能拉伸,多大尺寸显示效果也是一样的。
搞个图片还得网络加载,怪不值当的。
当网页加载的时候能少一个链接总归是好的。
Base64编码这种编码恰好适合我们。
下面分别透明和黑色的Base64编码
透明的:
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
黑色的
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICRAEAOw==
为什么要用gif的,因为我试了一下,gif的相对小一些
如果想要其他颜色的1*1px图片可以看下面步骤自己制作,非常简单。
制作1*1px Base64编码图片步骤如下:
1、先用PS或者画图软件,搞出个100*100px的透明或纯色图片
2、把画布缩小到1*1px
3、网上找一个 图片转换Base64 的工具,转换即可。
4、这里推荐一个站长工具里的base64图片在线转换工具 – 站长工具
注意:推荐转换小于300KB的.jpg/.jpeg/.gif/.bmp/.png/.ico格式图片,不建议将大图转换。
官方QQ群号码:922069959