html - How much faster is it to use inline/base64 images for a web site than just linking to the hard file?

Question

How much faster is it to use a base64/line to display images than opposed to simply linking to the hard file on the server?

url(data:image/png;base64,.......)

I haven't been able to find any type of performance metrics on this.

I have a few concerns:

• You no longer gain the benefit of caching
• Isn't a base64 A LOT larger in size than what a PNG/JPEG file size?

Let's define "faster" as in: the time it takes for a user to see a full rendered HTML web page

Answer 1

'Faster' is a hard thing to answer because there are many possible interpretations and situations:

Base64 encoding will expand the image by a third, which will increase bandwidth utilization. On the other hand, including it in the file will remove another GET round trip to the server. So, a pipe with great throughput but poor latency (such as a satellite internet connection) will likely load a page with inlined images faster than if you were using distinct image files. Even on my (rural, slow) DSL line, sites that require many round trips take a lot longer to load than those that are just relatively large but require only a few GETs.

If you do the base64 encoding from the source files with each request, you'll be using up more CPU, thrashing your data caches, etc, which might hurt your servers response time. (Of course you can always use memcached or such to resolve that problem).

Doing this will of course prevent most forms of caching, which could hurt a lot if the image is viewed often - say, a logo that is displayed on every page, which could normally be cached by the browser (or a proxy cache like squid or whatever) and requested once a month. It will also prevent the many many optimizations web servers have for serving static files using kernel APIs like sendfile(2).

Basically, doing this will help in certain situations, and hurt in others. You need to identify which situations are important to you before you can really figure out if this is a worthwhile trick for you.