This summer, I lived the wet dream of every warm-blooded web developer.
The journey to the ninth circle of <?php?> and back is not a trek from which every woman returns alive, true. But trust me, if you come back, you'll feel alive for the first time.
Today, I'd like to talk about Circle #9 herself: Base64-encoded data URIs. If you haven't had the pleasure, take F's lovable gray-textured background. The lil' guy is a humble repeated 4x4 pixel jpeg file (blown up below).
In the Data URI Scheme, where you can reference an image by its data instead of its location,
the following are equivalent:
/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHV
ja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAA
AAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGB
ggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMT
FBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0
YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx
8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fH
x8fHx8f/8AAEQgABAAEAwERAAIRAQMRAf/E
AE4AAQAAAAAAAAAAAAAAAAAAAAYBAQAAAAA
AAAAAAAAAAAAAAAAQAAIDAAAAAAAAAAAAAA
AAAADwMqO1EQEAAAAAAAAAAAAAAAAAAAAA/
9oADAMBAAIRAxEAPwAXltLAD//Z
Now, if you have an image-heavy site like F's, you'll notice that images are simply not going to load all at once. Each of those babies makes an http request, and today's popular browsers can handle maybe 5 requests at a time on average. 1, 2 Worst case scenario, you like a goofball when an entire article appears blank until your slew of icons at the top of the page have already loaded. The beauty of base64? 0 http requests!
So, instead of the usual hum-drum:
<img src='myimage.jpg'>3
A base64 image would be written as
<img src="data:image/jpg; base64,
<?php echo base64_encode(file_get_contents('myimage.jpg'));
?>">
Or, in your dynamic stylesheet:
#myImage{background-image:url(data:image/jpg; base64,
<?php echo base64_encode(file_get_contents('myimage.jpg'));
?>);}
Here's where it gets a bit antsy.
...IF I DIDN'T HAVE A RUM CHASER AND AN EXCELLENT LOVER
If the extra overhead of reading the string exceeds the cost of an extra request, you look like a goofball again.
!important; (ugh) Add the normal image link as the next rule, and IE will settle down.What does a girl do? It goes without saying that I implemented it into the site.
But should I feel good about it?
1Check out this article by Steve Souders, who puts my idea of living the wet dream to shame. As noted on his website, "Steve works at Google on web performance and open source initiatives." OMG
2Steve's stats are averaged out among the popular browsers for July 2011 reported by The World Wide Web Consortium.
3No, I'm not closing my image tags. I'm starting to ♥ html5.
LOL, I think this has got to be one of my favorite F blog posts ever!
I hope to read many many more along these lines!!!