Dynamic image replacement technique

24 February 2006   6 comments   Python, Web development

Powered by Fusion×

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:

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.


Tim Parkin
It's a very cool idea, we've used a similar technique to create the left hand navigation of our website http://pollenation.net. This uses pil and javascript and adds events for the rollovers too. We did try the sifr flash image replacement but flash didn't play particularly niceley. Be wary that when using onload, all of your images and stylesheets and other assets will load before it's triggered.
Hans Then
Hi, can you also give an example of the required python code? I was looking for something like this in a Zope environment and your's is the first I found
Tim Knapp
Me too please Peter! I would like to have some e.g. code as I'm developing a site in Japanese and the available Japanese fonts on most Windoze boxes is very slim - so I'd love to have my Japanese font embedded in the page (if this isn't possible with this technique then forgive my ignorance).
Hans Then
Hi Peter,
I have used your code in http://www.schaakhuis.nl. It a Dutch site for my chessclub. It's not very pretty perhaps, but the design will improve. Thanks
hi, where's the code for this please?
Hi Pete; Thanks for sharing the info. I was looking to find how to build a Flash or HTML demo (animation) for some software product using Zope/Plone in Python and put it on our web site.

Your email will never ever be published

Related posts

Google and Python code 22 February 2006
Apple Store or Micro Anvika 26 February 2006
Related by keywords:
What I hate about PIL and Image in Python 19 October 2009
ImageMagick conversion comparison 09 December 2006
Best Image Replacement Technique guide 07 October 2005