Aral Balkan

I love that you can embed Base64-encoded images in CSS and that WebKit understands them.

Here, for example, is a way to add my Open in External App icon to links that you capture from a UIWebView to display in Mobile Safari:

a {
  color:rgb(50, 79, 133);
  text-decoration:none;
  padding-left:26px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAARCAYAAADDjbwNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKZJREFUeNpi+v//PwM9MBMDncDws4jFOKBNF0hfIkGPydkNVWfJ8dEcEvXMIctHQKwOZTMSof4/EOuSaxE/CerBjgEGN9xiYDAywvhANt6g+09JJAMt+Y/PAmSLPhERXLgw0ZZRLXmDLCNkER81LALFFaU+YsSD4ZYgJRDaBB0xlsCS9ycSkvh/tGBiJJSskX10k4jUhZzKLpBbqKaTqCeFHIsAAgwAk2iI07NfUtQAAAAASUVORK5CYII=);
  background-repeat:no-repeat;
}

Comments

• I figured I'd bother you here instead of on twitter. So are you encoding the image or just the url? Because that's not a lot of chars for an image. The part I'm confused about is how there is no file dependency if you're simply encoding strings (URI's).

  by Arik Beremzon on 2010-02-07 12:54:53

• Hi Arik, it's encoding the image (it just happens to be a tiny little icon) :)

  by Aral on 2010-02-13 13:57:42