Use the below javascript function to base64 encode your photos. It requires the FileReader() class which is supported by all current modern browsers that support HTML5 and CSS3.

I've decided to make my website render html images via base64 encoding. Since it's MY personal website, I will not be supporting older browsers to help encourage the move towards modern browsers. With that said, all my images on my website is using the below function. Bleeding edge baby... bleeding edge. :P

var readPhoto = function(input) {
    if (input.files && input.files[0]) {
        var FR = new FileReader();
        FR.onload = function(e) {
		var photo = '<img src="' + + '" alt="">';

It's much quicker to store my website and blog post content without having to create an upload image system which would require crop, resize, and other image manipulation functions. I have found that HTML WYSIWYG editors and I do not get along so I write all my content in a <textarea>. I use an additional table that simply stores all the post/page "meta" content as a many to many relationship. A post can have multiple tags, as well as have multiple photos. I decided to use this table to store my <img src="BASE64" alt=""> and I map it with a key. In the <textarea>, I add the key such as {blog-photo.png} where I want the image to render. Of course, I've added some javascript functionality to the <textarea> for tab ability.

comments powered by Disqus
eXTReMe Tracker