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.
Comments
Post your own commentIt'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.
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
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.