Inline Images

Have you ever heard about inline images? Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as “immediate” data, as if they were referenced externally. This basicaly means, you can insert base64 encoded byte code of any image directly into html file. Using inline images saves HTTP requests over externally referenced objects. Data URIs can potentially store any type of data, not just images!

This example creates snapshot of flash application (on left side) and dynamicly (using javascript) creates inline image (right side) with base64 encoded bytes in src attribute. (right side is html <img>)

Application source:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    enterFrame="enterFrame()" borderStyle="solid" borderColor="#000000"
    backgroundColor="#ffffff">
<mx:Script>
<![CDATA[
    import com.adobe.images.PNGEncoder;
    import com.dynamicflash.util.Base64;
    
    private function enterFrame():void
    {
        if(!container || !container.width)
            return;
            
        container.graphics.beginFill(Math.random() * 0xffffff, Math.random());
        container.graphics.drawCircle(
            Math.random() * container.width,
            Math.random() * container.height, Math.random() * 30);
        
    }
    
    private function makeSnapshot(source:DisplayObject):void
    {
        var script:String = 'var img = document.getElementById("img");'
            + 'if(!img)'
            + '{'
                + 'img = document.createElement("IMG");'
                + 'img.id="img";'
                + 'document.body.appendChild(img);'
            + '}'
            + 'img.src="' + getSrc(source) +'";';
        ExternalInterface.call("function(){" + script + "}");
    }
    
    private function getByteArray(source:DisplayObject):ByteArray
    {
        var bitmapData:BitmapData = new BitmapData(source.width, source.height);
        bitmapData.draw(source);
        var bitmap:Bitmap = new Bitmap(bitmapData);
        return PNGEncoder.encode(bitmapData);
    }
    
    private function getSrc(source:DisplayObject):String
    {
        var byteArray:ByteArray = getByteArray(source);
        return 'data:image/png;base64,' 
            + Base64.encodeByteArray(byteArray);
    }
]]>
</mx:Script>
<mx:Container id="container" width="100%" height="100%"/>
<mx:Button label="Make Snapshot" click="makeSnapshot(this)"/>
</mx:Application>

Data URLs save HTTP requests. When combined with CSS sprites, data URLs can save numerous HTTP requests. It would be interesting to see if data URLs can be combined with USEMAPS or make a data URL CSS sprite. Data URLs are a convenient way to create self-enclosed web pages that don’t rely on external objects to render.

  • Save HTTP requests, avoids adding to object overhead
  • Save concurrent thread – browsers default to two simultaneous connections per hostname
  • HTTPS requests are simplified and performance improved

Well, for now I have no idea how can flash benefit from data urls 🙂 but if I come to something I let you know.

Leave a comment

Please be polite and on topic. Your e-mail will never be published.