Data URIs

Instead of linking to a file, Data URIs contain the file itself. This means that images can be embedded directly into HTML documents.

For pages with small images (thumbnails) this is can really increase front-end performance. There is a per-file overhead, so downloading lots of small files (even on a fast connection) can be slow.

The downside is that they are cached with the page. If the same image is to appear on another page, it will have to be embedded into the document again. It does not make sense for large images to be embedded as data URIs.

Also, they should not be used for files greater than 32kB anyway as IE8 will not support them.

IE6 and 7 do not support data URIs. All other browsers have good support.

Storage API 7.x-1.1 will be able to output data URIs, but it requires Drupal 7 core to support them. It does not yet, but you can apply the D7 patch from #1342504: Support data URIs. Drupal 8 includes support for data URI's using the same code listed in the aforementioned issue. In addition to this patch, an adjustment to the code found in Drupal core's image module, specifically the image.module file, is needed. In the function image_style_url, the last line of the function call:

$file_url . (strpos($file_url, '?') !== FALSE ? '&' : '?') . drupal_http_build_query($token_query);

needs to be replaced with the following code:

if(strpos($file_url, "data:") !== FALSE) {
    $returned_url = $file_url;
  } else {
    $returned_url = $file_url . (strpos($file_url, '?') !== FALSE ? '&' : '?') . drupal_http_build_query($token_query);
  }
return $returned_url;

This is needed to remove the "itok" query string from the data uri.

It may be necessary to delete the variable filter_allowed_protocols after applying the patch.

Containers serving data URIs should be local so that they can be read quickly by Drupal. A class should be created have the data URI option enabled. This can then be specified in image styles as the class for thumbnails.

It doesn't make sense for an image field's default image to be served as a data URI as it may appear multiple times on a page and may also appear on more pages. A separate class can therefore be specified for the default images for each style.