Image to data URI convertor
author: mike foskett incept: 28th January 2010
last modified: 24th February 2010
A simple utility to convert an image into base 64 data URIs for embedding images.
It's best practice to optimise images prior to conversion via a tool such as SmushIt or Image Optimizer.
Embedded images should be stored in cacheable files such as flat, not dynamic, HTML and style sheets.
Note: The file size increases by approximately 30% which may be offset by serving as part of a compressed (gzip / deflate) file. Take a look at this simple gzip content method.
Note: IEv8 has the lowest maximum data URI size of 32768 Bytes. Upload is limited to that maximum. Because of the approximate 30% increase in the conversion it is possible the result is larger than IEv8 can actually handle.
Note: base 64 data URI embedded images do not work in IE less than version 8. Personally I circumvent this issue by having one style sheet which contains image reference data and a second containing data URIs. Conditional comments switch between them:
/* All browsers (contains image references) */
<style type="text/css">@import "page.css";</style>
/* All browsers except IE (contains data URIs) */
<!--[if !IE]><!-->
<style type="text/css">@import "data_uri.css";</style>
<!--<![endif]-->
/* IEv8 and above (contains data URIs) */
<!--[if gte IE 8]>
<style type="text/css">@import "data_uri.css";</style>
<![endif]-->
Further reading:
- Inline Images with Data URLs
- data URI scheme
- Why The data: URI Scheme Could Help Save Your Slow Site
- Data URIs explained
- Detecting Support for data: URIs
- Using Data URIs in CSS
- Generic Data URI sprites
If you have any alternate resources why not email me or post them below for inclusion?
Have your say…
2
sunnybear [http://www.webogroup.com/]
24 02 2010
@imports are evil - kill 'em!
There is also http://duris.ru/ with cross browser data:URI
3
mike foskett replies:
24 02 2010
Hi Sunnybear,
@imports are faster to load in IE than <link href="/css/basic.css" rel="stylesheet" type="text/css" />
I've added the resouce you bought to my attention.
The commenting system used here is a modified version of comment_rave.
1
Nicolas Chevallier [http://www.nicolas-chevallier.fr/]
23 02 2010
Thanks for this tool. I will test with some basic navigation icons on my website.