Base64 and image files

For those who don’t know base64 it’s an encoding format for any data. In that case with the images we can simply say, that base64 equals to text (string) representation of the image itself. In most cases you’ve image tags with src attribute pointing to the http source of the image.

Overview of the problem

Let’s say we’ve a HTML document with 100 images into. That’s a rare case I agree, but sometimes it happens. You’ve to preload the thumbnails of an image gallery where only one image is displayed in a bigger size. As I mentioned before the progressive JPEG suits better for a large image but for the thumbnails you’ve to use baseline JPEGs.

Note: In fact the technique with base64 representation of the images is not well known. I think that’s because there are not so much examples with pages with more than 100 images.

But anyway. We’ve the HTML document with 100 images (100 <img> tags). That means directly 101 requests/responses from the server. In my tests on my localhost, which is supposed to be fast enough, that case loaded 2 MB with a simple small JPEG for the image, loaded 100 times, and approximately 3 seconds. Which yet again on the localhost is extreamly slow. The image is on my machine, the server is here… what else?

How to put the images inline?

The other way to do that is to put all you images in you HTML document. Than the first and more important rule for optimization (see more here), to make fewer requests is done. You now have only one request. And with the response you’ve all 100 images. That’s good when you’ve different images, cause every repeatable element in your CSS should be made with HTTP request once and than repeated with the CSS. In other way you risk the size of the document transfered in the web.

The results

The second case with the inline images and the only one request is giving me an average response time of 900ms. The size of the document is bigger, yes. I had 5KB for the HTML with no base64 images, and then the size increased to 45KB. That’s 9 times more. But however 45KB is nothing for the web, instead of all those 2 MB in the previous test.

How to make your images to strings?

Speaking in PHP terminology there is a function called base64_encode, which with a combination of file_get_contents(imagefile), make the files a base64 string.

Is there any issue?

Yes there is. First you cannot have your image files in a remote server, cause file_get_contents must read only from the local filesystem. Than if you process all those files before returning them to the client, where’s the point? You loose all that time you’ve spent with the technique.

The reasonable solution

I think this technique is good for cases like the one described at the beggining. You’ve a page with more than 100 images. Then you’ve the base64 representation already. Let say you have it in your database as string and don’t need to convert it everytime you return the image. That may happen on upload of the image and the image enters the database with its base64 representation, and it’s done.

Related posts:

  1. CSS sprites. Go beyond the limits with base64!
  2. Optimizing the web. Start with the images!
  3. Optimize your images – improve the performance
  4. sprite usage and website optimization
  5. Read The Anchor Part of The URL … with PHP
  6. What should be optimized in one web page?
  7. php.ini for two web servers
  8. CSS Sprites – common mistakes
  9. load flash .swf in hidden div
  10. Optimizing OpenLayers. Speed up markers load time!