Image to Data URI Convertor


A simple utility to convert an image into base 64 data URIs for embedding images.

Data URI conversion

Image to convertmax size: 32768 Bytespng, jpg or gif onlyBROWSE
CONVERT IMAGE

It’s best practice to optimise images prior to conversion via a tool such as SmushItImage Optimizer or PunyPNG.

Embedded images should be stored in cacheable files such as flat, not dynamic, HTML and style sheets. Data URI style sheets should be cached long term, rename the file on each update.

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 here is limited to that maximum. Because of the approximate 30% increase in the conversion it is still possible that the result may be larger than IEv8 can actually handle. This limit does not exist in IEv9+.

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 for IEv6 & 7, and a second, served by a conditional comment, containing data URIs:


/* All browsers (contains image references for IEv6 & 7 via the star hack perhaps) */
<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]-->

All layout definitions should be in “page.css” including a reference to the image for IE 6 & 7. Personally I use the star hack for this purpose:


.sprite {
  *background-image:url(sprite.png);  /* Only IEv6 & 7 see this */
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 10px;
  height: 20px;
}

While in “data_uri.css” only the background image itself is referenced:


.sprite {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}

Copy from http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s