Inlining images in HTML
When using small icons on a web page, it sometimes can be convenient to embed the respective image into the HTML code directly, instead of providing it as static image file and then fetching it via its URL in a separate HTTP request.
For example, the following klog logo isn’t hosted as separate image file on the web server, but the image data is directly included in the HTML code. This can be achieved by using data URLs and a base64-encoded image blob.
<img src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABO1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB5henaAAAAaXRSTlMAc8Yp6ZIL91GvgT4E/NFy5BOguxz1eFmMqJnD7ctI1mK3/gf6ewKFQpwQIHWi1BUsiVTYrHr/j88JngEGdlzVo33v+JvN0xbq1+b9nQ10ofsIdwN89u6keUO8FD8M65/ZVS0hhpqwKse7Exw0AAABW0lEQVQ4jX2TC1OCQBSFt5qyUppqnF72JHN6OVaMxwiLAkuNMs3U1B5WZv3/X9AuAhKLHGbg7pxvzt0LLCFU0bW6Vte8UseIrQx8FXOAI00XAEPX49ZF3XK8NukApJK6AqZSqbylOoxm/pW4NQJcOoswcPvfNoGGXStbwLzHJyVXglwDdgOARA5QZS9wCCStMloGNr0+A6yE+xmgWOGAczshewyIYc53WkS69CV1eZ8lPLBni/pqZBigTBeof8pNwPQIXDdm2Sc62/bzGdCXnq76Agumq7Fba2II8LbcnFvsUOLXr8kz8M6e8golMspwgChLlHjhgR3grl/JN0AnywFpOp9VHhjAR0ACSSSBUS7ClUDaAoQfL/AE7Nl1le6iFNDCHCnmnZT+9jlnsS9itR3QgpACxE8+4Xuwops4cbvrIb+jGbpwgHH/w9sbbKqnMm2YKpqSJKn1xbw/bEFbqdO6qO0AAAAASUVORK5CYII=" alt="klog logo">
A data URL starts with data:, followed by the media type (img/png in this case) and the information about the encoding (base64). The remainder is the encoded data blob, which can be obtained by using the base64 command line utility for instance.
$ base64 klog-logo.png
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABO1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB5henaAAAAaXRSTlMAc8Yp6ZIL91GvgT4E/NFy5BOguxz1eFmMqJnD7ctI1mK3/gf6ewKFQpwQIHWi1BUsiVTYrHr/j88JngEGdlzVo33v+JvN0xbq1+b9nQ10ofsIdwN89u6keUO8FD8M65/ZVS0hhpqwKse7Exw0AAABW0lEQVQ4jX2TC1OCQBSFt5qyUppqnF72JHN6OVaMxwiLAkuNMs3U1B5WZv3/X9AuAhKLHGbg7pxvzt0LLCFU0bW6Vte8UseIrQx8FXOAI00XAEPX49ZF3XK8NukApJK6AqZSqbylOoxm/pW4NQJcOoswcPvfNoGGXStbwLzHJyVXglwDdgOARA5QZS9wCCStMloGNr0+A6yE+xmgWOGAczshewyIYc53WkS69CV1eZ8lPLBni/pqZBigTBeof8pNwPQIXDdm2Sc62/bzGdCXnq76Agumq7Fba2II8LbcnFvsUOLXr8kz8M6e8golMspwgChLlHjhgR3grl/JN0AnywFpOp9VHhjAR0ACSSSBUS7ClUDaAoQfL/AE7Nl1le6iFNDCHCnmnZT+9jlnsS9itR3QgpACxE8+4Xuwops4cbvrIb+jGbpwgHH/w9sbbKqnMm2YKpqSJKn1xbw/bEFbqdO6qO0AAAAASUVORK5CYII=
There are a few things to consider about this technique:
- The data URLs are rather lengthy, so for image sizes above ~1KB it starts to become unhandy.
- On the one hand, you save some network requests by embedding images, and you also have less subsidiary files floating around on the server. On the other hand, you cannot trivially reuse the same image multiple times, and you also lose the ability for the browser to cache the image file.
- A data blob is less expressive than a file name, so the HTML is harder to read. (
alt=""tags to the rescue!)