which technique show image in css is faster?

Question

technique 1

.realimage {background: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')}

technique 2

.realimage {background: url('http://..test.jpg);

Questions

1. If I need to show multiple same image on the same page, I think technique 2 should be faster right? because subsequent to retrieve image will be from browser cache?

2. If I need to show multiple same image on the different page, I think technique 2 should be faster right? because subsequent to retrieve image will be from browser cache?

Answer 1

My main points against technique 1 would be:

• data URIs aren't that widely supported (I'm looking at IE in particular, of course)
• the same image used in different CSS files causes unnecessary overhead
• CSS files become unnecessarily large

Technique 2 should be preferred. Initially it causes an additional HTTP request, but each subsequent use of the same URL will be cached, regardless of where it's used (HTML, CSS, Javascript).