Suppose there is a fancy button to be put on a website. And the design of the button is such that parts of it can be sliced and applied as a repeating background.
I often slice the images and apply them as a repeating backgrounds this way. So one button in an image is split into several different images. I do this to reduce the size of the images used.
My team leader told me not to slice the images. If you slice a button into three parts, there would be three web requests. And this will slow down the site.
I find it hard to believe that the overhead of three requests would be more than using the entire image. So I just want to know how to calculate the amount of bytes transferred per web request.
If you reuse the three images a lot in the site than you will save requests and bandwidth (your gut reaction). However the three images need to be initially retrieved — so you must reuse them.
The crux is this: Due to HTTP pipelining the overhead is pretty much negligible (especially since you consider that this is HTTP — a string based protocol). Three images being retrieved probably have the same latency as retrieving a single image.
— edit: after comment from Ericlaw —
Pipelining is indeed not widely supported. However this does not mean you don’t stand to gain from three images. Just make sure you reuse them A LOT throughout your website.
— edit —
Browsers also open multiple connections to a server, the norm is 2 connections last I checked — however, I believe recent browsers open more.