Base64 and the tiling background


Warning: file_get_contents(): php_network_getaddresses: getaddrinfo failed: Temporary failure in name resolution in /var/www/joshemerson.co.uk/public_html/site/plugins/yourls.php on line 11

Warning: file_get_contents(http://joshe.me/yourls-api.php?signature=e5cd44033a&action=shorturl&url=%2Fblog%2Fbase64&keyword=base64bg&format=json): failed to open stream: php_network_getaddresses: getaddrinfo failed: Temporary failure in name resolution in /var/www/joshemerson.co.uk/public_html/site/plugins/yourls.php on line 11

Any website that uses tiling background images will experience this issue. Whilst the page is loading, the content is displayed before the background images has downloaded, and so the site may look similar to this:

Example of a tiled background loading

In some cases you may prefer this behaviour of content being shown first, and background images loaded asynchronously. This can make a website look rather odd however, and is very distracting because the site changes as it loads.

If you embed your background images within the CSS then they will be downloaded with the CSS, and nothing will be displayed until both the CSS and background images are downloaded. The whole site will appear at once, although it will have taken longer to display at all. Because fewer HTTP requests are made by embedding images, some sites can experience a performance boost.

It’s fairly easy to embed images into CSS, you will need to base64 encode them. I used an online converter to do this. Then take the string that your converter supplies and paste it into your CSS.

This CSS:
background: #FFF url(background.png);

Becomes this:

background: #FFF url(data:image/png;base64,iVBORw[...]SuQmCC);

This technique won’t work for IE6 and IE7, so we need a conditional comment:

<!--[if lte IE 7]>
    <link rel="stylesheet" href="ie7.css" />
<![endif]-->

In that CSS, you should link to the images rather than embedding them. The downside of this technique is that IE6 and IE7 will end up downloading the images twice, but all other browsers benefit.

I’m going to be using this technique on an upcoming project. You can see it in action on MobileMe.


Notice: Array to string conversion in /var/www/joshemerson.co.uk/public_html/site/plugins/tags.php on line 22

Fatal error: Uncaught Error: Function name must be a string in /var/www/joshemerson.co.uk/public_html/site/plugins/tags.php:22 Stack trace: #0 /var/www/joshemerson.co.uk/public_html/site/templates/post.php(12): tags(Object(page)) #1 /var/www/joshemerson.co.uk/public_html/kirby/lib/template.php(36): require('/var/www/joshem...') #2 /var/www/joshemerson.co.uk/public_html/kirby/lib/template.php(25): tpl::loadFile('/var/www/joshem...', Array, true) #3 /var/www/joshemerson.co.uk/public_html/kirby/lib/site.php(203): tpl::load('post', Array, true) #4 /var/www/joshemerson.co.uk/public_html/kirby/system.php(65): site->load() #5 /var/www/joshemerson.co.uk/public_html/index.php(71): require_once('/var/www/joshem...') #6 {main} thrown in /var/www/joshemerson.co.uk/public_html/site/plugins/tags.php on line 22