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. eclipse xml 文件添加注解快捷键

    eclipse xml 文件注解快捷键: <!--  --> Ctrl + shift + / 添加注解 Ctrl + shift + \ 取消注解

  2. Web 应用架构基础课(转载)

    Web 应用架构基础课 初级 web 应用开发者必学的基础网络架构概念 web 应用主流架构概览 上图便是我司(Storyblocks)网络架构的很好展现.如果你还没成为经验老道的 web 工程师,可 ...

  3. gitlab提交内容关联到slack通知

    gitlab提交内容关联到slack通知 https://docs.gitlab.com/ee/user/project/integrations/slack.html 首先去slack做相关的设置 ...

  4. tomcat9 性能调优

    官网最靠谱 tomcat 参数官网: http://tomcat.apache.org/tomcat-7.0-doc/config/http.html   <Connector   port=& ...

  5. Chrome表单自动填充如何取消(暂时可行的解决办法)

    做项目时一直遇到一个问题,那就是用chrome测试的时候页面上的表单一直会自动填充,并且伴有黄色的背景颜色,有时候感觉很方便,有时候又很想去掉. 之前也多次寻找过方法,但是网上的方法都差不多,很多都是 ...

  6. ubunta apt install error

    ubuntu系统: 用apt-get命令安装一些软件包时,总报错:E:could not get lock /var/lib/dpkg/lock -open等 出现这个问题的原因可能是有另外一个程序正 ...

  7. MySQL 如何创建索引?怎么优化?

    索引类似大学图书馆建书目索引,可以提高数据检索的效率,降低数据库的IO成本.MySQL在300万条记录左右性能开始逐渐下降,虽然官方文档说500~800w记录,所以大数据量建立索引是非常有必要的.My ...

  8. PYQT5 + PYCHARM

    PYQT5 C:\Users\xxx\AppData\Local\Programs\Python\Python37\Lib\site-packages\pyqt5_tools\designer.exe ...

  9. python分割txt文件

    a=open('A.txt','r').readlines() n=3 #份数 qty=len(a)//n if len(a)%n==0 else len(a)//n+1 #每一份的行数 for i ...

  10. Python2的一些问题及解决办法

    1. 无法注释中文的解决办法 # -*- coding:utf8 -*- # 添加这一行就行了 from django.contrib import admin from myapp.models i ...