Image to Data URI Convertor
Inline Images with Data URLs
Explaination: Explaination includes how to embed images into your web pages with data URLs. The data: URI scheme includes images directly into your webpages using code instead of external files, saving valuable HTTP requests like using
<img src="completepath of image" alt="" />
Inline images use the data URI scheme to embed images directly within web pages. data URIs are designed to embed small data items as "quick" data, as if they were referenced externally. Using inline images saves HTTP requests over externally referenced objects.
The Data URL Scheme
You've no doubt seen other URL schemes in your travels around the Web, such as http:, ftp:, and mailto: schemes. The data: URL scheme is a way to embed "immediate data" as if it was included externally. Data URLs use the following syntax:
In the case of an image, you'd use a mime type identifying the image (image/gif, for example) followed by a base64 representation of the binary image. Here is an example (note returns included to avoid horizontal scrolling):
The resulting image is a below icon (
Advantages of Data URLs
Data URLs save HTTP requests. When combined with CSS sprites, data URLs can save numerous HTTP requests. It would be interesting to see if data URLs can be combined with USEMAPS or make a data URL CSS sprite.
- Save HTTP requests, avoids adding to object overhead
- Save concurrent thread - browsers default to two simultaneous connections per hostname
- HTTPS requests are simplified and performance improved
Disadvantages of Data URLs
Inline images are not supported in Internet Explorer 5-7, although version 8 reportedly supports them. The base64 textual representation of image data also takes up more bytes than the binary image. In our tests the base64 data was 39 to 45% larger than the binary image, but with gzip compression the difference was reduced to only 8 to 9% larger. Optimizing your images before converting to base64 reduced the size of the string proportionally.
There are size limitations for inline images. Browsers are only required to support URLs up to 1,024 bytes in length, according to the above RFC. Browsers are more liberal in what they'll accept, however. Opera limits data URLs to about 4,100 characters. Firefox supports data URLs up to 100K, so this technique is best used for small, decorative images. In summary:
- Old IE 5-7 does not support
- More steps to update embedded content
- Technique is useful for smaller, decorative images not for bigger size
- Base64 encoded images are approximately 33% larger than their binary equivalent