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:
IMGTag
<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==
