High performance image replacement with data URI's and Flash

The replacement of texts into images/flashes is unfortunately necessary because of the missing feature of the browsers to embed fonts and the problem with the font vendors which prohibit the redistribution and embedding of their fonts.

Most of the technologies to replace texts with images or flashes work fine, but every solution slow down the browser when rendering the page. Nearly every technique parses the DOM to find the texts which should be replaced, because the scripts want to give you the maximum of flexibility the DOM-parsers mostly work very slow.

Disadvantages of the common scripts

Replacement of the texts with images

very much requests to the server where the images are generated and every request slow down the site (read more about this)
"flicker" - effect, because it take's some time to prepare the request and retrieve the image from the server, during this time the normal font is displayed.
parsing the DOM to find the elements which should be replaced

Replacement of the texts with flashes

the size of the swf-files is in the majority of cases very big, especially on multilingual pages it grows up to a indefensible size (Cyrillic, Latin, ... ).
"flicker" - effect, not as fatal as images, but mostly there is one
parsing the DOM to find the elements which should be replaced

So what is my solution ?

My solution is to deliver the image base64 encoded directly in the HTML document as a Javascript variable. this can be done with every scripting language like PHP, Perl, Phyton, ... I generate the image when the text is entered in the CMS, but it's also no problem to generate it during rendering the page (using a cache of course :) )

Since Internet Explorer < 8 doesn't support data URI's it's not possible to embed the image-data directly to the HTML, only with a hack (MHTML) that also requires a request to the server for each image. So there must be an other solution, which I found with flash.

Flash allows you to display images that are base64 encoded, so I created a Flash that can be used for ervery image dimensions, to have only one request to the server for all images, and the swf has only a size of 3K, and the browser caches the file.

I use swfObject and a little Javascript to embed the images in the website. The Script determine the data URI support of the browser, if the browser support data URI's the image will be embedded directly, else the flash will be loaded which displays the image, if there is no flash player installed or the version is below 9.0 there is no change on the document.

This script isn't limited to display font-images, you can also use it to display normal images.

Following the code to display the font:

<div class="headline" style="height:80px;">
	 <h2 id="head_671e70978f4ad9d7950840bcfe2dfb61">High performance image replacement with Flash</h2>
</div>
<script type="text/javascript">
	//<![CDATA[ 
	elementsImageReplacement.display("iVBORw0KGgoAAAANSUhEUgAAAiYAAABQEAYAAAB9umLwAAAABmJ....","head_671e70978f4ad9d7950840bcfe2dfb61",550,80);				
	//]]>
</script>

<!-- put this code in the <head> - section of your document -->
<script type="text/javascript" src="/static/release/js/imagereplace.js"></script>
<script type="text/javascript">
	//<![CDATA[
		elementsImageReplacement.setSwfPath("/static/release/swf/base64image.swf");
		if(!elementsImageReplacement.hasDataUriSupport()) {
			elementsImageReplacement.hasRequiredFlashVersion();
		}
	//]]>
</script>

Real example

I use this technique on this site, deactivate Javascript and you will see how it looks without the replaced font.

Download

The latest swf-file and javascript can be downloaded here.
SwfObject can be found here.

whats new on ambien :))) tramadol sales on line :[[ meclizine 25 mg sale vuucf paxil support :-((( clorindione online buy pqkid

Really like the technique you\'ve used!
Can it be used to show and image (instead of Flash) if Flash isn\'t supported?
I\'m looking for a way to show an image \"only\" if Flash isn\'t enabled. I don\'t want the image to be downloaded if it\'s not required (Flash is supported be the user web browser)

amoxicillin 200mg 8-) estradiol disposal 781 paxil research 8532 azelnidipine 30 tablets idnvtq

betalon.com - simply webdevelopment