Image to data URI convertor
author: mike foskett incept: 28th January 2010
last modified: 16th July 2011
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) */
<link rel="stylesheet" href="page.css" type="text/css" media="all" />
/* All non-IE browsers and IE > v7 see this: */
<!--[if gt IE 7]><!-->
<link rel="stylesheet" href="data_uri.css" type="text/css" media="all" />
<!--<![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
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
23 02 2010
Thanks for this tool. I will test with some basic navigation icons on my website.