[web知识]网页当中使用base64表示png图片

Base64是一种基于64个可打印字符来表示二进制数据的表示方法,也是一种常见的传输编码方式。

图片是以二进制形式存储在磁盘上,因此可以以二进制形式表示,也可以对二进制进行base64编码。

与二进制形式相比较更加简短,且具有不可读性,即肉眼不可直接看出。

因此,网页上可将较小图片转换成为base64编码的字符形式传输,可减少网页上的图片对server单独发起的http请求,进而减少服务器负载。

实例:

.linkedin {

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEsElEQVR42r2XaWyUZRDH9YMnghRCbQ0R6XKpQZqYIBoUIocSISAGRWuMJBoTjUftAWpZ222r5VCuFrVr71K23e0l9LInAm2s9QhWPogJMVrbkCKWSivtmnHm2fz3fbrPuxi/0OSXmfnPzDv/vG222WvUz8qsWMbNtF8l3OomjosYd7ClP7PpB//OttOU1dJrC3qhcUfbj8ZMuD25EZfT0i831W1x83R2c39K3ff0ckU3PVN8nDYXTSSutBMEtWdLTiC3m7fVnmNe9HSRs+EUyU31JsRJUk2Pf0vZSdpcfII2FRxDNAjpIxfCzxSa81sOd1Fi9dd+ua0MJNT20FPs8kke2JjfodjEtZaHq2UHNeeqDwIa5jXkVvKR7yho4PXqHlr/WTttLPgSqPrhA000KalEsXRfo9ICc8eQY8+2Ri7zG/IC9RP5gd3XKrstAy95Oml9XgetzW1FVKzMaaSz54cVqzgXDaxz67Mm0gOodfimZeCFsk5a625XrPmkJZhfGLlM+JEc/cdz2yQaSB+g1nf0mm9aBuSPY82nbbT6YDM9xk3kF/8ew33JRTOQWQDt0Y9bQnUj55uWgQ38SlbzkrAiu0lQeWLtNzRwcYT6mfiqbvTtZnXNTjdm1uW2WgZW5XxBy/c30oqcZhC2RjSxn0MuPJKt7ij4pmVgOTt6aF99kGUHGki0a98o0JFeWP3erBqKSvHQdfGFonEsoqjt5bRkj9oBeIZgGVjKjsADe+qCjPn/0UHf0KP50LL9DZTX9ROdGx4VTaKqHek+WrK33u75loH7PzxK4MG9DUEujfl1MGPou1p7kRv8PjRC8zOq8EzcYAP1loH7dn1OwmJuLv6ojgnEodExHZmB/r/Y3dYre9gHmoHdRyl2Ry1JRC4MXrqsg56hn/3jL0rmj/PnS4+Tu+uM0e/4eQDPlwgsA7E7j9DCD2oUkoOB4VEd9A09obpb35XamGEdM8gtAwuzakm4O7NKRfDb0IjOlXXs//cM5iwDC9IrSbiLG8jveb9GXq0OenY6doDdDG5gRjOQWU06c10+Fc8MDk9gXkalnY497lcht5vBcxEtA3PZ2RwmJrVCIbVw+tyQDnqGHtj3YU/mzBn00ipwxzIQk+YjYZazPBDfC8RT/X/qSF8wdG2fd21n8Ewg9UQDM7d7aFaqV0Xwbd8FHczY6sIdzopwM6IJ6IsJzYDLS9Hvlilmsnvh9pTD9NWv53XQs9NlF9jNQMcMvwGPZcDh8tFt75RR5NuHBJVH8z+Wk78M6kgvnG6AHpA9vX+n/itwpHlp+taSIJFsgDE0xBn8ANThmLHtEOZtnzdbfwOzU8tpanIxTecHB+EHQJM4bVupREXE1lLoRg87iLqm13xT+xvgYkpSEU1OnMhUPqTXtyaViAb9StHYncK70CLY8ByXV/sVOMvHI9jVzW8V0OSkYjukB/ghE+tbQupJCYX6jrE/jW85UivGYcAd+UpeX0yaV73KmxKKFNe/mR/kxvhCFdG7Ib4ANWYAZkJy9ArVDbklN/HVbJE4iXo1v8/h9IwvyOBPLP60kgigIdoxz+WVaMzOT/eFaN5xuSU31W0igomr/fV8kdz+F8uDPRGifaVMAAAAAElFTkSuQmCC);

}

附:java下base64编码转换工具:http://iharder.sourceforge.net/current/java/base64/

转载于:https://www.cnblogs.com/wanping/archive/2012/12/02/2798563.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值