CSS efficiency

[diabolo]

which would be more efficient in loading times?

• (15 x 5) solid color background picture;
• (15 x 15) solid color background picture;

i am thinking that the 15x5 would load faster, but anything is possible

 

[leafypiggy]

if its a solid color, why not just use background-color: #/*value*/ ?

 

[diabolo]

because i have it set within a <span> tag; and it has a set height, and to create the same effect it would require more coding, and therefore increases file size, and code starts to look messy

 

[sourfacedcyclop]

I would say that the 15x5 would be faster. The file size will be smaller, so once the browser loads it into its cashe (did I spell that right?), it will just repeat it until it fills the specifies area.

 

[leafypiggy]

it's cache.

And I get it now.

 

[sourfacedcyclop]

Close enough

 

[diabolo]

so in this case, actually a
15 x 1
would be the most efficient

 

[xPlozion]

yes. the smaller the file size the faster it can repeat itself and reduce load times (although a 15x1 wont take long to load at all, but some people still have dial-up).

 

[sourfacedcyclop]

If you are just using a solid color, I don't see why you just don't use a 1x1 side file....

 

[diabolo]

If you are just using a solid color, I don't see why you just don't use a 1x1 side file....

i need the image to define the height of the bar

 

[sourfacedcyclop]

Can't you just give it a height:15px value?

 

[nightscream]

of course the smallest one.
it all depends on the filesize

 

[Scoochi2]

If you want to go down the image route, use 1x1 px image, and stretch it in your HTML.

If you want the most efficient method, use CSS and not an image.
Instead of using span, just put in a blank div, set the background and define a height and width...

 

[diabolo]

Okay, you guys are getting on my nerves right now by telling me the same thing, i explained why I can't do

because i have it set within a <span> tag; and it has a set height, and to create the same effect it would require more coding, and therefore increases file size, and code starts to look messy

Can't you just give it a height:15px value?

That would require another <div> tag to be placed and more css coding; this returns a larger file size.

If you want to go down the image route, use 1x1 px image, and stretch it in your HTML.

If you want the most efficient method, use CSS and not an image.
Instead of using span, just put in a blank div, set the background and define a height and width...

i would use css, but i need the specific heigh for the bar, so that is not possible without, again, aditional code

 

[Scoochi2]

you do realise that a larger file size sometimes means more efficient code?
The 'additional code' should be no more code than actually putting in the image in the first place anyway

 

[xPlozion]

one thing i've noticed in the past w/ me diablo, is that background images don't stretch the span/div to the image's height. i've had to set a height w/ them all the time or it would just enlarge enough to fit the text/content in them

 

[diabolo]

you do realise that a larger file size sometimes means more efficient code?
The 'additional code' should be no more code than actually putting in the image in the first place anyway

so let's say i need to repeat the section 15x:
<span class="classname">Link</span> [~400bytes]
instead of just tiling a (15x1) [~100bytes] with CSS [~200bytes]
about 600bytes

but in your case:
<span class="classname">Link<div class="div_classname"></div></span> [~1200bytes]
and the css would be: [~250bytes]
about 1450bytes

the other approach would require to load more than twice the amount of bytes my version would have to load

one thing i've noticed in the past w/ me diablo, is that background images don't stretch the span/div to the image's height. i've had to set a height w/ them all the time or it would just enlarge enough to fit the text/content in them

thanks for the concern, but that isn't a problem. Also you can't define a <span> tags width and height, unlike a <div> because it is not a block element

 

[xPlozion]

thanks for the concern, but that isn't a problem. Also you can't define a <span> tags width and height, unlike a <div> because it is not a block element

ah, ur right . i don't play w/ span tags much, because i normally don't find a use for them, other than formatting text inline for colors and font-styles/bold.

i'm guessing that you are making a site for cellphone users or dial-up users, cause you're really concerned about making the file as small as humanly possible, while still creating the effect (which high-speed users don't even notice)

 

[diabolo]

well, no, actually i was drafted into a TSA competition. and they chose me for webdesign.
so even though they would have a fast-internet connection; if the website could come up in a snap, that always helps with the judging

also a little here and a little there, could eventually add to up to a whole lot somewhere...
i just don't know where somewhere is..xD

 

[xPlozion]

lol, tsa=Technical Student Association? i used to be in that in 8th grade