1. Technology

Data URLs Can Help Speed Up Your Site

Inline Images Reduce Server Calls and Speed Up Download Times

By

Data URLs are a way to embed small image files directly into your web pages. You don't need to upload any images, you just reference an encoded URL and the image appears.

How to Write and Use a Data URL

Data URLs are just like other URLs only instead of the http: prefix, they use data:. Data URLs use the following syntax:

data:<mediatype>;base64,<data>

The media type is the type of image, such as image/gif or image/png. The “base64” is the encoding. And the data is the encoded image.

You can use a data URL that encodes an image anywhere you would use an image URL, such as:

  • IMG Tag
    <img src="data:image/gif;base64,....">
  • CSS
    url(data:image/jpg;base64,....)
  • JavaScript
    var img_src = 'data:image/png;base64,' +
    '....';

Data URL Browser Support

Data URLs work in the following browser versions:

  • Chrome 1
  • Firefox 1
  • Internet Explorer 8
  • Opera 7.2
  • Safari 1

If you are concerned about IE 7 and 6 not supporting this scheme, you can always use conditional comments to display a style sheet with regular image URLs for IE 7 and lower.

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

Encoding Images for Data URLs

The easiest way to encode your images into Data URLs is to use an online tool. The Data URI Encoder works well.

Benefits of Using Data URLs

  • Fewer HTTP requests
  • HTTPS requests simplified for improved performance

Drawbacks to Using Data URLs

  • Internet Explorer 7 and lower don't support it
  • You have to re-encode an image every time it changes
  • URLs can only be 32KB (on IE), so only good for small images
  • Base64 encoding is larger than binary image encoding (regular image files)

Here is an example of a data URL. If you copy and paste it (without the carriage returns or spaces) into your web browser, you will see a small check image. Or you can click on this URL.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAMAAABFjsb+AAAAGXRFWHRTb2 Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXpQTFRF7Ozs5ubm3d3d9PT0+vr6+fn52tra1dXV7u 7uhoaGxMTE5+fns7Oz9/f3z8/PoqKiIYoq4+Pj8PDw9vb219fXo6OjwsLCra2tjo6Oy8vLuLi4zc3N6O jo6+vrbZ1xi4uLn5+fgbmFb5hztLS0iIiI3eXe3Nzcubm5zNzNkpKSsLCwHocmaoNsydnKGYIi5OTklp aWxcXFx8fHfraDk5OT1eXXyMjILI00U6Ra8fHxMZI529vbCXoTIIgoQptJw8PDG4QkzMzMmJiYHYYm0d HRjIyMp6enj4+PbIRu4eHhQppJv7+/2uvcIIkoZHxm7e3tpqamFn8fpLSlbo5xtbW1dZV38/Pz6urqmM icCXoS4uLiHn8m7+/v4ODgrKysHYYlqqqqL5A30tLShr6LmZmZe3t7h7+Mvr6+fn5+uMi5m5ubnJycrs ew5+/ng7yIgICAlZWVk6OVioqKfX19wcHB9fX18vLy+Pj4/Pz8+/v7/f39AHkK/v7+////CiB4BwAAAS BJREFUeNpU0FVzwzAQBOAzJHHSMCdNyszMzMzMzNzasqzzf6/ktjPpPn5z+3ALdmFQxIZ/cmNS08ICQ7 MvHNOJasJfAZGOsOU8RHUXIO4tUd6w6AJjjYOypOmA1mW4Ww+Q5wHG2FhPsbvIAKQvbLgOqs85sZLK26 mDKFiknLHJp15BFaG1rczxEVh6J/vNdttbmX98vh9Mpfn0hzZnp7sStReSwk26b+EyNOf1ph8bOuRVwr s5z8Y621+5fv24SiXjOYUCEnD73g+bPu+qJk6+PJLhsgBVIxLMhupL0w+pJCfC/0UzAHIme5aY8fvi4k rsglTflYPti6PiBUHCUFWgVXbXRPI7DtnOLjRmaKAZuuqQsymiSQkhKkWH7G8BBgAnn3es6aJK1wAAAA BJRU5ErkJggg==

©2014 About.com. All rights reserved.