Article | Date posted : 6 February, 2014 | Updated on : 6 February, 2014

Page load speed test for images

Sponsored Links

A week ago I suggested converting your post images to base64 to improve your page loading speed, and received a comment that this concept is ridiculous.

Why would you do this considering:
1, Some (corporate) systems disallow base64 code from loading (base64 is usually used for phishing/ scamming etc).

2, If you optimise your images properly in the first place you won’t need to use another method.

3, You’re creating even more steps for something which is relatively straight forward.

4, Google loves relative file names – header.jpg for example – this method destroys file naming to something like SGVsbG8gd29ybGQ for example.

I wouldn’t advise going down this route but each to their own.

Ok some of the comments where a misinterpretation of using base64 for images. But regardless of this quote being misinformed. It got me thinking, so today I put my suggestion to the test. I want to test what the best method is when including images into your blog, e-commerce or web site. The different tests that we will be doing for integrating images into your website are normal images, one with optimized images and one with converted in line base64 images.

With each test we will do two more tests, a page built with 3 images and a page with 15 images. To see what the comparison difference is when loading lots of images versus a couple.

With all tests we will use Pingdom and Gmetrix, with each test page tested 5 times using both on-line tools.

We will test the following methods

  • Normal images
  • Compressed images (60%).
  • Convert to in-line base64

Test 1 using 3 non optimized images

Here we will test the images saved with 100% quality, without any compression.

Test page url

The total file size for all images are

  • Total image size : 738kb

Average loading speed

  • Gmetrix : 406ms
  • Pingdom : 696ms
gmetrix test1 normal history

gmetrix test1 normal history

pingdom test1 normal history

pingdom test1 normal history

Test 2 using 3 optimized images

Test image url

The total file size for all images are

  • Total image size : 115kb

Average loading speed

  • Gmetrix : 251ms
  • Pingdom : 413ms
gmetrix test2 optmized history

gmetrix test2 optmized history

pingdom test2 optimized history

pingdom test2 optimized history

Test 3 using 3 inline base64

The negativity before doing the tests is that you have to convert each image to base64.

Test image url

The total file size for all images are

  • Total image size : 1010kb

Average loading speed

  • Gmetrix : 594ms
  • Pingdom : 777ms
gmetrix test3 base64 history

gmetrix test3 base64 history

pingdom test3 base64 history

pingdom test3 base64 history

Test 4 using 15 normal images

Test page url

The total file size for all images are

  • Total image size : 2.26mb

Average loading speed

  • Gmetrix : 891ms
  • Pingdom : 755ms
gmetrix test4 normal 15 images history

gmetrix test4 normal 15 images history

pingdom test4 normal 15 images history

pingdom test4 normal 15 images history

Test 5 using 15 optimized images

Test page url

The total file size for all images are

  • Total image size : 646kb

Average loading speed

  • Gmetrix : 529ms
  • Pingdom : 355ms
gmetrix test5 optimized 15 images history

gmetrix test5 optimized 15 images history

pingdom test5 optimized 15 images history

pingdom test5 optimized 15 images history

Test 6 using 15 inline base64 images

Test page url

The total file size for all images are

  • Total image size : 3167kb

Average loading speed

  • Gmetrix : 1456ms
  • Pingdom : 738ms
gmetrix test6 base64 15 images history

gmetrix test6 base64 15 images history

pingdom test6 base64 15 images history

pingdom test6 base64 15 images history

Conclusion

 

Gmetrix Pingdom
Test 1 406ms 696ms
Test 2 251ms 413ms
Test 3 594ms 777ms
Test 4 891ms 755ms
Test 5 529ms 355ms
Test 6 1456ms 738ms

Optimizing your images is still by far the best way to minimize page loading times. Base64 unfortunately adds lots of data nearly doubling the image size. By reducing the connections required for the browser to download each file we can see in the test above that it does not improve page load speed.

So I would recommend to use svg images when you have lots of vector images, alongside optimized images inside your web site. An additional tip is to use LazyLoad which delays the downloading of images outside of your viewport. This will allow the browser to be in ready mode at a higher speed.

Sponsored Links

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me