Search F News...

When I'm Base64

By Uncategorized

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
}
base64 version: cleaner than ASCII, ballsier than links




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.

WHY I F'ING LOVE BASE64-ENCODED IMAGES
Small images with compressed base64 encoding are less likely to stall the loading of other content.
Sick of compiling your images into a single sprite for speed? Your prayers hath been answered.
WHY BASE64-ENCODED IMAGES WOULD KEEP ME AWAKE AT NIGHT
...IF I DIDN'T HAVE A RUM CHASER AND AN EXCELLENT LOVER
Base64 strings are larger than their binary equivalents.
If the extra overhead of reading the string exceeds the cost of an extra request, you look like a goofball again.
To please versions of Internet Explorer prior to 9, you must commit the cardinal sin of CSS: follow up your base64 background-image declaration with !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.

One Response to When I'm Base64

  1. Nick Briz says:

    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!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

three − three =