Case Study Base64 vs. Embedding Images

[Nick]

Inspired by this post by @Journey66 I decided that I needed to test if Base64 encoding your images was actually faster... and by how much. If you've used any spy tool recently then you'll know that you constantly find base64 encoded images in the landing pages.

For this test, I used a simple push collection landing page that I found :

In total that landing page has 4 images, 3 in the body of the page and 1 as the favicon.

I uploaded the page with the images encoded with Base64 and in another folder uploaded the same landing page with .jpg files instead. They are hosted on Amazon S3 with Cloudfront as the CDN.

Then I used the trusty GTmetrix page speed tester to see if Base64 is any faster, and if it is by how much. I set the Test Server Region to Dallas, USA, as Cloudfront has an edge location there.

I tested each landing page 10x with both an unthrottled full speed connection and with a throttled 3G connection. Here are the results:

Here is the data I collected (note