Mobile version of this page
Save this page in del.icio.usGoogle and Python code
Next:
Apple Store or Micro Anvika
Related blogs
Best Image Replacement Technique guideImageMagick conversion comparison
Related by category
Dynamic image replacement technique
image replacement, truetype font, text headers, proof of concept, pil
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.
Comment
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
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).
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
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.