Displaying images with base64

Base64 encoded images can be embedded using img tags or CSS, speeding up load times for smaller images by preventing additional HTTP requests. This can be done to build single-file mockups / demo pages for your clients, HTML email signatures that will not trigger the nasty "show images" warning in email clients, etc.

In other words, base64 encoded image data is packaged in HTML or CSS payloads. However, we may need to store base64 encoded strings into somewhere such database in order to present them on a web dynamically.

Pros

• Base64 is fine for transport mechanism. So it is suitable to embed a base64 encoded image into an XML document or an email message.
• Base64 encoded images help to reduce number of HTTP requests. Especially, it is extremely effective for small images.
• Embedding base64 encoded images in CSS files is much more simple than using sprites.

Cons

• Base64 encoding data is bigger than their original binary representations roughly 33% in size. This requires more transportation on the wire, which might be exceptionally painful on mobile networks.
• With a large image, web browser need to wait for the whole base64 coded stream before rendering below elements.
• IE6 or IE7 do not support data URI.

Use base64 as image sources

You can use the base64 encoded string as a value of the src parameter, using a data:image/... construct.

<img src="data:image/jpeg;base64,/9j/4RiDRXhpZ..." alt="base64 test">

Use base64 as css background

You can use the base64 encoded string as a CSS background image, too. Simply feed the url() parameter with data:image/...

.my-class {
    background: url('data:image/jpeg;base64,/9j/4RiDRXhpZ...');
}