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
>
> 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
>
> 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
> {-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);}
>
>
>
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. :(