用base64替换URL图片(1×1px)来优化web页面性能

实用知识 7年前 (2017) 工具猫
8,501 0

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

<img src="https://www.toolmao.com/wp-content/uploads/2016/11/logo.png" />

或者css里这样调用

background-image:url("https://www.toolmao.com/wp-content/uploads/2016/11/logo.png")

那么本文所说的base64要怎么用呢,把图片地址换成通过base64编码的图片代码即可,请看下面的代码:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />

给图片做占位,有时可能会用到这种1个像素纯色的图片,这种能拉伸,多大尺寸显示效果也是一样的。
搞个图片还得网络加载,怪不值当的。
Base64编码这种编码恰好适合我们。


下面分别透明和黑色的Base64编码

透明的:

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

黑色的

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICRAEAOw==

为什么要用gif的,因为我试了一下,gif的相对小一些

那我是怎么搞的那?

步骤如下:

1:先用PS或者画图软件,搞出个100*100px的透明或纯色图片

2:把画布缩小到1*1px

3:网上找一个 图片转换Base64 的工具,转换即可。

比如百度上排第一的这个工具 图片在线转换Base64_图片编码base64_image转base64_base64图片

用base64替换URL图片(1×1px)来优化web页面性能
版权声明:工具猫 发表于 2017-07-13 14:39:53。
转载请注明:用base64替换URL图片(1×1px)来优化web页面性能 | 工具猫