0

I am creating a website and the design have lots of background images so I used image sprites to optimize page loading time.

The thing is I have 3 sprite images and 2 of them are 200 KB each and dimensions are not more then 900x700 px.

My question is about optimizing page speed. What will produce best result? Will it be better to use two 200 KB sprites or is it better if I break them into 4 sprite image of 100 KB each.

As far as I read many articles, mostly developers and experts say to minimize http request because these days internet is fast enough so downloading doesn't take much time. I agree at some extent but I am not able to make my mind up between 2 more http request with lower image size or less http request with larger image size.

Robert hue
  • 302
  • 11
  • 25

1 Answers1

1

This seems like micro-optimization for me, but anyway the most performance way is to embed the image in the html page, so you just use the single http request of the page.

You can embed the image using the new data: protocol and including the image as a base64 encoded string, check out this tutorial for the details.

Also see the browser support for this feature.

Nelson
  • 49,283
  • 8
  • 68
  • 81
  • That will not work because I don't want my website code to look bad. Plus I don't this that is what I asked. Thanks anyway! – Robert hue Oct 16 '12 at 20:25