A few weeks ago Google started including Instant Previews in their Google Instant SERPs. For this Google uses the same trick they’ve been using on YouTube results in the SERPs, presenting the images with Base64 encoding. The main purpose for Google is to reduce the number of HTTP request to their servers. If every SERP would require 10 additional images to be loaded it would most definitely impact the ‘perceptual speed’ at which the website is loaded. With Base64 encoding image data can be send inline and it wouldn’t require additional HTTP requests, just some extra milliseconds for sending this data.

You can easily implement this in your own website or application, just take a look at the PHP code below.

$img_src = "img/sample.jpg"; $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); $img_str = base64_encode($imgbinary); echo '<img src="data:image/jpeg;base64,'.$img_str.'" alt="Alt text" />';

Uses this wisely and don’t go overboard, images presented through Base64 aren’t cached and using this for every image on your website would most definitely impact your site’s performance. Use it for on-the-fly created and non-reusable content only!

Update: Joost de Valk has released a very nifty tool that allows you to base64 encode images, check it out!

Share this: Twitter

Facebook

