http://www.webhek.com/post/base64-encode-of-1x1px-transparent-gif.html

Base64 Encode 1x1px透明GIF图片

Base64 Encode 1x1px透明GIF图片能干什么?这种图片的特征就是体积最小化,最大限度的减少带宽。而且是透明的,具有隐身作用。用到的场景很多,比如测试浏览器是否支持data URI技术,或用来做一个透明的浮动层,或在lazy load图片时用它来做占位符。

下面就是Base64 Encode 1x1px透明GIF图片的data URI数据,有一天你会用到它们。

透明图片

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

黑色图片

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

http://kaifage.com/notes/56/minimum-transparent-image.html

最小尺寸的透明图片

按照GIF89a Spec的规范,一张最小的透明图片大小为43字节,去掉颜色表(color table)后的“非规范”图片大小为37字节,这可能是最小的实际使用的透明图片了。如果是非透明的还可以更小。

最小图片的base64使用代码:

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

作为标准GIF文件(43字节)的GIF 文件结构解析如下:

  • Header, 6 bytes: 包含 “GIF” 和所采用标准的版本,如 “GIF89a”.
  • Logical Screen Descriptor, 7 bytes: 包含文件大小、颜色表(color table)等
  • Global Color Table, 6 bytes: 对应RGB,每3字节表示一个
  • Graphic Control Extension, 8 bytes: 指明第二类颜色如何处理,如作为透明、动画参数等
  • Image Descriptor, 10 bytes: 位置和大小信息,对动画型gif,可以包含多帧信息
  • Image Data, 5 bytes: LZW 压缩算法的图片数据.
  • GIF Trailer, 1 byte: 文件结束符,3B

via: http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

--- xw

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 透明:
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
黑色:
data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=

最小 base64 图片的更多相关文章

  1. 编写base64图片文件

    base64编码代替css背景图片在网站上应用是很广泛的,例如:loading gif图片,天猫加载时那只猫等等. 因为base64图片可以减少http请求,所以我们经常会把不经常改动的,独立的,尺寸 ...

  2. MVC显示Base64图片

    本篇演示ASP.NET MVC应用程序,显示Base64图片. Insus.NET浏览网页,发现一个站点http://www.base64-image.de/ 想起以前也有实现过<如何把数据流转 ...

  3. img src 使用 base64 图片数据

    img src 使用 base64 图片数据 在网页上显示一张图片通常是 <img src="xxx.png" > 或 <img src="www.ur ...

  4. Base64 图片转换工具

    以前在写asp的后台的时候,有一个上传功能是必须的,那时候进行的图片预览(未上传前)其实就是获取本地的图片路径来显示图片,但是随着HTML5的出现,可以把图片通过编码来实现预览. 在雅虎的36条速度优 ...

  5. base64图片在各种浏览器的兼容性处理

    IE浏览器目前最高的版本是v11,而微软放弃了IE,转向新的浏览器开发,并取名为Edge.base64图片在IE9及以后的图片均能显示没有问题,而Firefox, Chrome, Safari等非IE ...

  6. Base64图片与UIImage的相互转化

    http://blog.csdn.net/fudesign2008/article/details/38903085 Base64图片 -> UIImage - (UIImage *) data ...

  7. 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  8. PHP将图片转base64编码以及base64图片转换为图片并保存代码

    图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...

  9. Base64图片转Blob对象

    //将Base64图片转成Blob对象 //@args: base64Url:编码字符串,contentType:类型. function base64UrltoBlob(base64Url, con ...

随机推荐

  1. VIM For Windows 1

    some tips for using vim in windows. 1,download the software vim and install it, you can go to the Of ...

  2. Linux基础命令---文本统计paste

    paste 将文件以行的方式合并在一起,用tab字符分隔开,将结果送到标准输出.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语 ...

  3. navicat链接阿里云mysql报80070007: SSH Tunnel: Server does not support diffie-hellman-group1-sha1 for keyexchange

      http://www.jianshu.com/p/200572ed066c navicat 链接数据库 使用navicat 的ssh通道连接数据库回遇到权限问题 错误代码如下: 80070007: ...

  4. 51Nod 1256 乘法逆元

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1256 给出2个数M和N(M < N),且M与N互质,找 ...

  5. 大数据学习路线之linux系统基础搭建

    学习大数据是必须掌握一定Linux知识的,工欲善其事,必先利其器.在学习之前,首先需要搭建Linux系统,本节将讲解VMware Workstation的安装和CentOS 7系统的安装. 1.2.1 ...

  6. 怎样从外网访问内网IIS?

    本地安装了一个IIS,只能在局域网内访问,怎样从外网也能访问到本地的IIS呢?本文将介绍具体的实现步骤. 准备工作 安装并启动IIS 默认安装的IIS端口是80. 实现步骤 下载并解压holer软件包 ...

  7. 模板(Template)系统

    一.常用语法 官方文档 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 1.1变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板 ...

  8. mxnet设置动态学习率(learning rate)

    https://blog.csdn.net/xiaotao_1/article/details/78874336 如果learning rate很大,算法会在局部最优点附近来回跳动,不会收敛: 如果l ...

  9. JDK源码之HashSet

    1.定义 HashSet继承AbstractSet类,实现Set,Cloneable,Serializable接口.Set 接口是一种不包括重复元素的 Collection,它维持它自己的内部排序,所 ...

  10. Tensorflow学习笔记01

    Tensorflow官方网站:http://tensorflow.org/ 极客学院Tensorflow中文版:http://wiki.jikexueyuan.com/project/tensorfl ...