Embedding images as base64 encoded data URIs: issues and workaroundsThe 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
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")) ?>
ConclusionEmbedding 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)