• This is a simple trick that I’m including in the next release of IE7. Mozilla and other browsers already support Base64 encoding of images. This gives web authors the ability to express image URL‘s in this geeky-looking (and therefore cool) way:

    1
    <img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzMwAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" width="150" height="150"/>

    That ghastly mess will produce the following image in most decent browsers:
    Base64 encoded image

    Can’t wait to do it yourself now can you?

    Internet Explorer does not support Base64 encoding of images so we will take advantage of PHP’s built-in base64_decode function. We will simply pass the Base64 data back to a module which will then decode the data and return the appropriate image. Now that sounds complicated doesn’t it? Here is the required PHP code:

    1
    2
    3
    4
    5
    6
    7
    <?php
    $data = split(";", $_SERVER["QUERY_STRING"]);
    $type = $data[0];
    $data = split(",", $data[1]);
    header("Content-type: ".$type);
    echo base64_decode($data[1]);
    ?>

    That wasn’t so bad. Now we need a little bit of JavaScript to pass the Base64 data to the PHP module:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // a regular expression to test for Base64 data
    var BASE64_DATA = /^data:.*;base64/i;
    // path to the PHP module that will decode the encoded data
    var base64Path = "/my/path/base64.php";
    function fixBase64(img) {
    // check the image source
    if (BASE64_DATA.test(img.src)) {
    // pass the data to the PHP routine
    img.src = base64Path "?" img.src.slice(5);
    }
    };
    // fix images on page load
    onload = function() {
    for (var i = 0; i < document.images.length; i ) {
    fixBase64(document.images[i]);
    }
    };

    Example: /my/base64-ie.html

    Prev:
    Vector-Based Icons!
    Next:
    Alts Bandai Ski Resort 2012