We're generating our pages in PHP and want to make the generated pages load as quickly as possible in the browser. When generating the pages (which are .html pages) we realized we have two options:
Page with data URL images
<html>
<head></head>
<body>
<img src="data:image/png;base64,blahblahblah1" />
<img src="data:image/png;base64,blahblahblah2" />
<img src="data:image/png;base64,blahblahblah3" />
</body>
</html>
Page with "normal" images
<html>
<head></head>
<body>
<img src="/images/image1.png" />
<img src="/images/image2.png" />
<img src="/images/image3.png" />
</body>
</html>
There are pros/cons of the DataURL:
Pros:
Fewer trips from browser to server (there would only be ONE trip) - Given the generated nature, and needing to maintain this and the CSS, using sprites does not work well on this project
Less bandwidth usage on smaller images
Much faster in HTTPS
Cons:
Image sizes will be larger due to base64 encoding (about 37% larger)
Doesn't work in IE7 and in IE8, there's a limit on size of 32KB
Will the "one-trip" really make a big difference? Will it be noticeable to the user?