Dynamic image replacement technique
24th of February 2006
I've been playing with PIL's ImageDraw to create images from text. This isn't anything new but I thought I'd combine it with some Web 2.0 technology. The page is marked up like before in valid and accessible XHTML, then a javascript kicks in to automatically replace the plain text headers with image generated ones.
The benefit of this is that the image replacement stuff happens AFTER the page has been loaded for snappier response times. The page looks better with image headlines because you're not font-limited there (see apple.com for example). And most importantly: you want images for headlines but you also want to be found on Google.
Go to the demo page to see it in action.
This is of course only a proof of concept demo. If you do this properly you'll want to do two things properly unlike what I've done:
- your own proper (and nice looking) TrueType font file
- cache the image properly so that any text is only generated once
The script that generates this image is very fast. On this machine it takes about 0.02 seconds and with run-once-only caching in place that's no time at all.
Tweet