在浏览器中解析Base64编码图像

不错。用JS解决Base64的问题。小图片，少量颜色下。用div来绘图也是可以接受的。
而且，这种方法特别适合最导出。
日后还可以把Mp3，Mp4也进行base64编码。嘿嘿！

这东西不错
我也利用过base64做图片预览效果

其实这还有另一种思路也有很意思，即javascript重新构造Base64串来实现客户端的绘图 --- 一般用于绘制一些简单的数学图形，比如sin(x)

just forgot it, 这种辩论可以互相学习。

Rails 里可以写个 helper ：

require 'base64'
Cache = Dir.glob("#{RAILS_ROOT}/public/img/small/*.gif").inject({}){|c, f|
  data = Base64.encode64 File.binread f
  key = File.basename f
  c[key] = %Q[<img src="data:image/gif;base64,#{data}"></img>]
  c
}
def base64img name
  Cache[name]
end

页面用起来就像这样：

<%= base64img 'abc.gif' %>

但是，传输的数据量变大了不止 1/3，因为静态资源完全可以返回 304 让浏览器读缓存的 …… 绝大部分图片——就算很小——都会得不偿失吧 ……

另外不是总能减少打开的连接数的，现在浏览器请求网页很多都是 keep-alive 重用同一连接的 ……

再另外，对一个 img 元素进行 gzip 压缩真的有意义么 …… 还不如 gzip 整个网页 ……

楼上。你的data协议的base64编码的图片也可以写在css里，css一样享受304。经过简单的gzip压缩之后，传输的数据量大不了多少。

keep-alive虽然有用，但是仍然多一些request/response的过程，而且是线性的。


不过用js解码和再造图片确实不靠谱，那只是老外做的有趣的研究性项目。

gzip之后,size基本不变，而连接数在任何情况下都不会增加，缓存照样生效。

gzip整个网页是个动态过程，而gzip某个image可以是个静态过程，一次完成，永远生效。

我个人认为对于老浏览器还是转换为 http://example.com/data:image/png;base64,...... 比较好。返回的response可以设为永久不过期的缓存。反正它的内容只依赖于path，永远不会变。

兼容是一个大问题
div拼图片太不实用感觉还不如用服务器生成的方法

Great article, thank you!