Image to Data URI Convertor

Note:
Browse to upload image
View Data uri (Text)
 

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:

data:[<mediatype>][;base64],<data>

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):

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAT
CAIAAAAbG2rfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABh
0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4zjOaXUAAAAfVJREFUOE+lk8Fr0
2AYxp+DA8+Ch/0L3gSPHsW/QHbUi5cxDyJ400K10s4lyxpBhR2GF2F40YNU0B3WUUHnv
Nhh23VN+iXplA1N1DqnNa/v17RL87XIpuWXJk+e93v69X0TmN7/ouqIvIs5V34r90eiao
ZXagKmA10cKEXVTLaO53SciNbsVxlbdYdRtSlwzcVPesYRYZu02pjRGqpJomrNxqM9hL9
o6fOlDnmFhp5tqjUKCZF3MC2wThfCXcrUj7Tpqbf9MbeBuYGaYRJiVmD+E0KqvN1YvVp
FgY7x31lsTGh/bWpCaBYe/x7nZWb1NG8nv81xXtmp3Iqa2h3zINGq3imqSAn8oAV3iz
KbmLGRtlCmc7RL+c2jhgvDwWwTut2Fr51eShzBxoPv4C0Mf1bqT240YCbdongRdTqOy
Fp4Q2epQ6s7uZXgYsmffOlPLbfPf6WyH7Rvvoexg7UvV0r+VCmYfB1cfuickU/gfgT
v8H6ADjVrrXfXqzIuIlVDkU7wbxas9HQzvs/d0Zze2t7pto3C3kkuXVzXc32P4eh5X
+6/+qEyY42erjz4cdC3ICgV+pRT6gTSAi6lOt9owTrFXYytPvKIJnTXwx1Htn3QZgy
ebgv3uPlCvr6Ky/SvujPjye1PO4YtId0RVhdV/wOqPjQe/gDBm6xJuumFgQA
AAABJRU5ErkJggg==">

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

Suggest a resource