1*1px gif透明、黑色Base64编码图片 1x1px大小Data/Base64数据的gif透明图片

普通的html图片调用代码是这样的：

<img src="https://ioozu.com/logo.png" />

或者css里这样调用

background-image:url("https://ioozu.com/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格式图片，不建议将大图转换。

点击链接加入群聊三群：751529538

点击链接加入群聊二群：376877156

点击链接加入群聊【路由器交流群：622891808已满】

本站附件分享，如果附件失效，可以去找找看

诚通网盘附件、百度网盘附件

饿了么红包