Faster to load one big image or 6 smaller ones?

[don rhummy]

Which is faster?

1. Loading one big background image that's 11 kb
2. Loading 5 images that total 1.5 kb, and one of the images will be repeated in the background many, many times (using background-repeat)

I know 1.5 kb sounds much faster than 11 kb but it requires 5 trips to the I/O (or over http? - not sure how browsers load images).

[Eric Jung]

I would go for a 3rd option:

3. Create a CSS sprite of the 5 * 1.5kb images for a total of 7.5kb, but
requiring only a single HTTP roundtrip. You can then use CSS rules to split
the sprite as you like.

Eric

[don rhummy]

Interesting idea.

So will the one trip of 1.5 kb + the css "spriting" definitely be faster than 5 trips to get a total of 1.5 kb? There is some calculating, etc that needs to occur in spriting.

(P.S. You misunderstood the total size. The big image is 11 kb, the 5 small images TOTAL 1.5 kb all together, so they're each about 200 bytes) :)

--- On Tue, 5/26/09, Eric Jung <eric...@yahoo.com> wrote:

> _______________________________________________
> dev-extensions mailing list
> dev-ext...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-extensions
>

[don rhummy]

Sorry. One more question:

Since I have to repeat the 5th image (both vertically and horizontally) is this even possible with CSS sprites?

[Eric Jung]

On Tue, May 26, 2009 at 2:46 PM, don rhummy <donr...@yahoo.com> wrote:

>
> Interesting idea.
>
> So will the one trip of 1.5 kb + the css "spriting" definitely be faster
> than 5 trips to get a total of 1.5 kb? There is some calculating, etc that
> needs to occur in spriting.
>

You should run your own benchmarks, but I can't see how 5 trips of 1.5kb
could possibly be faster than one trip of 1.5kb with a few CSS rules. Don't
forget that although your images may be X kb, there is overhead above and
beyond that X kb in HTTP/TCP/IP packets even if the connection to the server
isn't broken between the 5 requests. I don't know what "calculating" you
refer to in spriting, perhaps you mean the what gecko has to do to split the
sprite into regions?

[Eric Jung]

On Tue, May 26, 2009 at 2:49 PM, don rhummy <donr...@yahoo.com> wrote:

>
> Sorry. One more question:
>
> Since I have to repeat the 5th image (both vertically and horizontally) is
> this even possible with CSS sprites?

I'm not a CSS guru, but take a look at this:
http://css-tricks.com/css-sprites/

I've defined sprites in Firefox/Seamonkey/Thunderbird/Songbird/etc
extensions this way. No background repeating, but the link above should help
you with that.

.foxyproxybutton
{-moz-image-region: rect(0px 24px 24px 0px);}

.foxyproxybutton:hover
{-moz-image-region: rect(24px 24px 48px 0px);}

[iconsize="small"] .foxyproxybutton
{-moz-image-region: rect(0px 40px 16px 24px);}

[iconsize="small"] .foxyproxybutton:hover
{-moz-image-region: rect(16px 40px 32px 24px);}

.foxyproxybutton-small
{-moz-image-region: rect(0px 40px 16px 24px);}

.foxyproxybutton-small:hover
{-moz-image-region: rect(16px 40px 32px 24px);}

[Eric Jung]

> .foxyproxybutton
> {-moz-image-region: rect(0px 24px 24px 0px);}
>
> .foxyproxybutton:hover
> {-moz-image-region: rect(24px 24px 48px 0px);}
>
> [iconsize="small"] .foxyproxybutton
> {-moz-image-region: rect(0px 40px 16px 24px);}
>
> [iconsize="small"] .foxyproxybutton:hover
> {-moz-image-region: rect(16px 40px 32px 24px);}
>
> .foxyproxybutton-small
> {-moz-image-region: rect(0px 40px 16px 24px);}
>
> .foxyproxybutton-small:hover
> {-moz-image-region: rect(16px 40px 32px 24px);}
>

Oops, copy-paste didn't work right. This is what I meant to paste:

[Eric Jung]

>
> .foxyproxybutton
> {-moz-image-region: rect(0px 24px 24px 0px);}
>
> .foxyproxybutton:hover
> {-moz-image-region: rect(24px 24px 48px 0px);}
>
>
>

For background-repeat with sprites, see
http://www.phpied.com/background-repeat-and-css-sprites/ and do a google
search for more.

[don rhummy]

Thanks for the help but...

> For background-repeat with sprites, see
> http://www.phpied.com/background-repeat-and-css-sprites/

Judging by this page, it looks like I will be unable to use sprites for this as I need to be able to repeat an image both vertically and horizontally. It says you can only repeat in one direction. That's kind of what I figured. :(