Little-Known Tech: Data URIs
An image doesn’t always have to be an image. Images on websites are usually .png, .jpg, or .gif files located on a server that are referenced in code. Data URIs allow you to skip referencing an image file and embed the image directly in the HTML or CSS. Here are the basics:
When placing an image on a web page, it’s usually done by referencing an image on the server:
<img src="/images/smileys/smile.gif" alt="Smile"/>
Which looks like this: 
A data URI is the same image encoded and added directly to the code:
<img src="data:image/gif;base64,R0lGODlhEwATAPcAAP/+//7/////+////fvzYvryYvvzZ/fxg/zxWfvxW/zwXPrtW/vxXvfrXv3xYvrvYvntYvnvY/ruZPrwZPfsZPjsZfjtZvfsZvHmY/zxavftaPrvavjuafzxbfnua/jta/ftbP3yb/zzcPvwb/zzcfvxcfzxc/3zdf3zdv70efvwd/rwd/vwefftd/3yfPvxfP70f/zzfvnwffvzf/rxf/rxgPjvgPjvgfnwhPvzhvjvhv71jfz0kPrykvz0mv72nvblTPnnUPjoUPrpUvnnUfnpUvXlUfnpU/npVPnqVPfnU/3uVvvsWPfpVvnqWfrrXPLiW/nrX/vtYv7xavrta/Hlcvnuf/Pphvbsif3zk/zzlPzylfjuk/z0o/LqnvbhSPbhSfjiS/jlS/jjTPfhTfjlTubUU+/iiPPokfrvl/Dll/ftovLWPfHXPvHZP/PbQ/bcRuDJP/PaRvjgSffdSe3ddu7fge7fi+zkuO7NMvPTOt2/Nu7SO+3OO/PWQdnGbOneqeneqvDqyu3JMuvJMu7KNfHNON7GZdnEbejanObXnOW8JOa9KOvCLOnBK9+4Ku3FL9ayKuzEMcenK9e+XODOiePSkODOkOW3ItisI9yxL+a9NtGiHr+VH5h5JsSfNM2bGN6rMJt4JMOYL5h4JZl5Jph3Jpl4J5h5J5h3KJl4KZp5Ks+sUN7Gi96lLL+PKMmbMZt2Jpp3Jpt3KZl4K7qFFdyiKdufKsedRdm7feOpQN2QKMKENrpvJbFfIrNjJL1mLMBpLr9oLrFhK69bJFkpE1kpFYNeTqFEIlsoFbmlnlsmFFwpGFkoF/////7+/v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAANAALAAAAAATABMAAAj/AKEJHCgokKJKlhThGciQYSIva7r8SHPFzqGGAwPd4bKlh5YsPKy0qFLnT0NAaHTcsIHDho0aKkaAwGCGEkM1NmSkIjWLBosVJT6cOjUrzsBKPl54KmYsACoTMmk1WwaA1CRoeM7siJEqmTIAsjp40ICK2bEApfZcsoQlxwxRzgI8W8XhgoVYA+Kq6sMK0QEYKVCUkoVqQwQJFTwFEAAAFZ9PlFy4OEEiRIYJD55EodDA1ClTbPp0okRFxBQDBRgskAKhiRMlc+Sw4SNpFCIoBBwkUMBkCBIiY8qAgcPG0KBHrBTFQbCEV5EjQYQACfNFjp5CgxpxagVtUhIjwzaJYSHzhQ4cP3ryQHLEqJbASnu+6EIW6o2b2X0ISXK0CFSugazs0YYmwQhziyuE2PLLIv3h0hArkRhiCCzAENOLL7tgAoqDGLXSSSaPMLIIJpmAUst/GA3UCiuv1PIKLtw1FBAAOw==" alt="Smile"/>
Which will display as: 
While almost all modern browsers support data URIs (including Firefox, Safari, Opera, Chrome, and Internet Explorer 8) IE 6 and 7 don’t, so that limits their usefulness. Also, data URIs aren’t cached like normal images; an encoded image used twice on a page is downloaded and rendered twice, every time that page is loaded. The encoded data is usually larger in size than the actual image equivalent, so it’s best to keep the encoded images small.
There are several web applications available that will encode images for you. My favorite is here: http://www.scalora.org/projects/uriencoder/. If you use a Mac, there is a stand-alone app available: http://osx.iusethis.com/app/imagetodata
Using data URIs certainly seems like a gimmick, but it can be useful in certain circumstances. If you contribute to a blog but don’t have the ability to upload images, data URIs would be a nice work-around. Also, if you have a need to keep everything contained in a single HTML file (say, for offline viewing), data URIs can come in handy. They also work in CSS, so you can add encoded images through styling.
I would suggest only using data URIs for simple graphics, such as the smiley sample above. Larger images add a LOT of code, and can make your code hard to read. Internet Explorer 8 is limited to 32 KB (even with that limitation, imagine adding 32,000 characters to your HTML). However you use them, have fun!
Comments
Test comment
Another test
Leave A Comment