Pro and contra of images encoding as base64 encoded data URI for performance purpose

One of the common techniques of the website performance optimization is the reducing of the HTTP requests amount. Each website asset, like image, needs a HTTP request to be loaded.  On this issue is based an idea, to embed website images as base64 encoded data URI. After an image is embedded directly into HTML or CSS of the website, no additional HTTP request is needed to load this image - it is no longer an external resource, but becomes a part of the source code. This is the good part.

Embedding images as base64 encoded data URIs: issues and workarounds

The not so good part of the topic is, that embedding images as base64 encoded data URIs has some issues. To make an argued decision about whether this technique will be helpful for own website and to which images is this technique to apply, one must know the issues and workarounds. I list them now:

Issue: Base 64 image encoding adds a bunch of code to the web document
Workaround: Minify, merge and compress HTML and CSS files

Issue: Different troubles with Internet Explorer
Workaround: Here, there and there (specially about MHTML and data URI in CSS for IE678)

Issue: On mobile, data URIs are 6x slower then embedding of real images
Issue: Regardless of whether the data URI content exists in a cached CSS or HTML file, the browser must decode the image each time a page renders
Workaround: Here

Issue: Images embedded as base64 encoded data URI aren't indexed by search engines cause of URL lack. Encoded images mostly don't contain EXIF or IPTC metadata too, which are widely used for advanced image SEO.
Workaround: don't use this technique for images, which have content value.

Issue: Image can't be encoded before embedding, cause it load dynamically
Workaround: Use on-the-fly-encoding

<?php echo base64_encode(file_get_contents("../logo.gif")) ?>

Conclusion

Embedding images as base64 encoded data URIs as the website performance optimization technique should be better used for images, which are

• small (icons, favicons, buttons, social service logos)
• don't carry any increment value for the content (cause they can't be indexed)