Google introduced a new search feature the other day called "Instant Preview", where when you hover over the url of the site, you get an image of what the site looks like. This tech has been around for a while and when in found the context of a site where you are trying to read an article is, frankly, annoying. Google's implementation is fantastic - and because you're not trying to read Google Search, the site previews are a welcome addition to the search results page.

But I think that how they are actually serving the data to your browser is even more fantastic than the front-end experience when you look at some of the details behind how it's done.

The developers put up a post on the Google Code blog about how they strive to keep the pages loading fast as well as how they implemented lots of compression and caching mechanisms: will have noticed that we send back the image data as sets of data URIs. Data URIs are base64 encodings of image data, that modern browsers (IE8+, Chrome, Safari, Firefox, Opera, etc) can use to display images, instead of loading them from a server as usual.
To show previews, we need the image, and the relevant content of the page for the particular query, with bounding boxes that we draw on top of the image to show where that content appears on the page. If we used static images, we’d need to make one request for the content and one request for the image; using JSONP with data URIs, we make just one request. Data URIs are limited to 32K on IE8, so we send “slices” that are all under that limit, and then use Javascript to generate the necessary image tags to display them. And even though base64 encoding adds about 33% to the size of the image, our tests showed that gzip-compressed data URIs are comparable in size to the original JPEGs.
In my experience, some of the preview images are a little lacking in quality - the jpeg compression seems pretty high on some sites. Looking at the preview image for our blog page, the JPEG compression on the downloaded image is at 54% - that's pretty far below the standard that generates "good quality" JPEG images.

Hopefully Google will continue to refine this feature and make it even better.

Color me impressed!


Color me impressed!