Yes you have read it correctly.
If you are asking youself how come, then the answer is using Data URI scheme.
Data URI is a scheme by which you can add in-line data to a web page.
How to do that:
This includes the following steps
1. Encode the image to Base64 encoding.
The following URL will help you in doing that. You just need to provide the image url and it will give you the encoded string.
2. Use the Base 64 encoded string.
After getting the encoded string you can use it directly in HTML page (along with <img /> tag) or you can use it with CSS (as CSS background property).
(In HTML image tag)
<img alt="Encoded Image" height="20px" width="20px" src="data:image/png;base64,oVBUiusFSDfdfsFSDFs............" />
(In CSS background property)
background: url('data:image/png;base64,oVBUiusFSDfdfsFSDFs............') no-repeat right center;
Pros and Cons:
Let’s come to the important part : )
1. P For every object in your web page there is a request sent by the browser (same for image, 100 different images means 100 different requests), so this methods saves HTTP requests.
2. C It won’t work lower version of IE (IE 5-7).
3. C Size of the encoded code is somewhat larger than the original image itself.
4. C Max size of data URI is different in different browser.
“It’s just another method to include inline data into the page, it’s not an alternative method.”