Inspecting the effects of base64 encoding on file composition and network traffic pattes

BACKGROUND

I'm reading up about base64 encoding with a view to understanding the network traffic generated by content I'm writing (HTML(5), CSS(3), Javascript) and came across the following article:

http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/

The first passage which caught my eye was:

base64 encoding makes file sizes roughly 33% larger than their original binary representations

The article later goes on to suggest GZipping, and seems to demonstrate the file sizes to be very close between binary and base64 images, once they are GZipped. When combined with the benefit of avoiding multiple HTTP requests for single images, the advantages seem clear... However, it then complicates its position:

But for image content, where there is nothing to be saved but HTTP requests, you should definitely think twice about base64 encoding to save requests. Yes, you will save a few HTTP requests, you won’t really be saving bytes, and the user might actually think the experience is slower because they can’t see the image content as it’s being downloaded. Even if you shave off a few milliseconds of wait time, the perceived performance is what matters most.

The article ends on this conclusion:

This being said, it’s generally advisable to put your common UI icons in base64 in your CSS, then let that whole chunk get cached by the browser. Those are usually clean vector icons as well, which seem to get compressed quite well (see Test #1).

But for image content, where there is nothing to be saved but HTTP requests, you should definitely think twice about base64 encoding to save requests. Yes, you will save a few HTTP requests, you won’t really be saving bytes, and the user might actually think the experience is slower because they can’t see the image content as it’s being downloaded. Even if you shave off a few milliseconds of wait time, the perceived performance is what matters most.

However, I find that I am still somewhat in the dark as to what the outcome would be of implementing a base64 system in practical terms. To sum up, these things seem evident:

1. base64 should result in a single HTTP request per image, as opposed to multiple requests for a single image
2. base64 results in larger file sizes, but this issue can be reduced by using GZip (though I wonder if this would actually result in similar download times, as I understand there are other compression algorithms which may already be in place at other points in the network, which the image information may pass through...)
3. Though in theory a single HTTP request would be preferable to multiple HTTP requests, the result of this could be a longer wait to download files as the client has to wait until a single request completes, rather than downloading each section as it finishes (not sure how this differs from progressive encoding...)

Now, all this is important to me because I need to be working on systems with very limited bandwidth (similar to a highly over-burdened company intranet or a massively multi-user chat relay system), so even a marginal difference in file-size could make a noticeable difference to responsiveness and practical utility. Which brings me to my request:

REQUEST

I know this is a long-shot question, but would there be a way to monitor the network traffic at a lower level then is possible in the network traffic section of standard inteet browsers? That is: I would like to be able to not just note the size of the packets being sent in response to HTTP requests, or even just track all the nodes they travel through (though this would be useful, as I'm not sure how to do with on an on-going basis -- I assume some sort of looping version of traceroute??)...

What I would really like to be able to do is look at the composition of the base64 encoded packets vs standard HTTP request packets, as well as the frequency of these requests, and what effect they in causing bottlenecks in network traffic, and see at a glace, in an ongoing and visual manner what the differences are for my particular piece of software, running on my particular network -- between base64 and standard HTTP.

Again, I know this may be a difficult thing to answer but I really would appreciate your time and effort on this! Also, apologies if this is a total newbie question as I'm more of the software developer than a system engineer, so this is right on the edge of my experience!

Recent Questions...