0

I'm trying to compare (for performance) the use of either dataURIs compared to a large number of images. What I've done is setup two tests:

  1. Regular Images (WPT)
  2. Base64 (WPT)

Both pages are exactly the same, other than "how" these images/resources are being offered. I've ran a WebPageTest against each (noted above - WPT) and it looks the average load time for base64 is a lot faster -- but the cached view of regular view is faster. I've implemented HTML5 Boilerplate's .htaccess to make sure resources are properly gzipped, but as you can see I'm getting an F for base64 for not caching static resources (which I'm not sure if this is right or not). What I'm ultimately trying to figure out here is which is the better way to go (assuming let's say there'd be that many resources on a single page, for arguments sake). Some things I know:

  1. The GET request for base64 is big
  2. There's 1 resource for base64 compared to 300 some-odd for the regular (which is the bigger downer here... GET request or number of resources)? The thing to remember about the regular one is that there are only so many resources that can be loaded in parallel due to restrictions -- and for base64 - you're really only waiting until the HTML can be read - so nothing is technically loaded than the page itself.

Really appreciate any help - thanks!

Zach
  • 1,185
  • 3
  • 24
  • 60

1 Answers1

0

For comparison I think you need to run a test with the images sharded across multiple hostnames.

Another option would be to sprite the images into logical sets.

If you're going to go down the BASE64 route, then perhaps you need to find a way to cache them on the client.

If these are the images you're planning on using then there's plenty of room for optimisation in them, for example: http://yhmags.com/profile-test/img_scaled15/interior-flooring.jpg

I converted this to a PNG and ran it through ImageOptim and it came out as 802 bytes (vs 1.7KB for the JPG)

I'd optimise the images and then re-run the tests, including one with multiple hostnames.

Andy Davies
  • 5,794
  • 2
  • 26
  • 21