Base64 Encode Images With Django

ately, having spent a good deal of time in the mobile web realm, I have increasingly become more of a performance freak. For mobile websites one of the biggest performance killers is doing HTTP requests. It takes a lot of time to setup / tear down the connection. The transfer rates tend to be rather terrible and they chew up battery life. I noticed that images were the biggest culprit of excessive HTTP traffic. Not only from the HTML itself, but CSS background images, which many web developer tend to forget about, can really slow things down. One easy solution around this is to Base64 encode the images and either deliver them in the style sheets or HTML itself.

So I thought to myself - You could probably do this pretty easily with Python & Django for any website and make load times faster. Here is how you might go about doing that. First lets set up a simple Django Model for handling the image it self.

Simple enough. It doesn't do much, but it doesn't really need to. The only thing left is to add a single method that will return a URI for display in a web browser. It might look a little something like this:

Ya, That's it! Python strings have an encode function that accept one of a number of encoding types. One of which is "base64". Python does all the heavy lifting and all you need to do is build a string that looks like a data URI. We want to wrap it in a try block because if anything goes wrong in that step, you will still want to fall back to the default Django behavior so something shows up and your users won't be presented with a 500 Error page. Here is what it looks like in it's entirety:

Using it in your Django templates is even easier. You just access it as a property off of the Photo object in the template, and you are good to go

<img src="{{ photo.image_url }}" />

It couldn't get any easier. And anything goes wrong during the encoding step, it will still output the actual image url. This, of course is an over simplified example, and you may want to use this method with image thumbnails and of your own custom logic. I would also reccomend looking into Justin Driscoll's awesome Django project ImageKit, which is the successor to the Photologue project.

I'm a software developer and system architect working at help.com. Most of my day is spent working with Javascript & Node.js. I've also done a good deal of web and print design work in my day. I created this space to share my experiences with the world and hopefully learn something in the process.

This Space

Here you will find my ramblings and rants about web development. My focus is around JavaScript( MooTools, Sencha, NodeJS ), Python & Django, HTML & CSS. Most things here target a wide range of skill levels - from the very simple to the moderately complicated. You may also find the occasionaly personal ranting and I may stand on a soap box from time to time.