homepage Welcome to WebmasterWorld Guest from 54.242.126.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
1px width background images performance
bzgzd



 
Msg#: 4076040 posted 12:43 am on Feb 8, 2010 (gmt 0)

Hi.

I have on my web page some gradient backgrounds for whole page and also for navigation menu.

I see many people use images that are 1px width and then let browser to repeat them a lot of times.

But is this not bad for browser performance? Saving little time on download but maybe when browser will need to draw that image 1200 times and another image 1000 times... maybe result will be not better. Especially when page is scrolled or something.

Are you using this 1px technique?
I am thinking to change my images to maybe 10px or even more...

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4076040 posted 1:13 am on Feb 8, 2010 (gmt 0)

<rasies hand> I am a fan of the 1px solution.

The render performance of which you speak is dependent on the computer viewing it. The number of object requests from the server and size of the objects will outweigh the importance of tiling in load time of the page.

Maybe on an old 486 . . . one might be able to tell the difference. :-) But on an old 486, you'd probably be running a 56K modem at best, and if you want to see a site *today*, it's very likely you'd have images off.

Xapti

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4076040 posted 7:51 pm on Feb 8, 2010 (gmt 0)

You're talking about using multiple 1px images for gradients?
That's done with javascript/php? or just a buttload of files and css?
Either way, I don't consider it a good idea cause its just an extra thing that causes bloat.

Xapti

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4076040 posted 7:53 pm on Feb 8, 2010 (gmt 0)

hate when i press the back button and it double posts...

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4076040 posted 11:52 pm on Feb 8, 2010 (gmt 0)

You're talking about using multiple 1px images for gradients?


No . . . single image in both cases, say a body/div BG is 1px x 600px.

body { background: #fff url(/images/body-bg.gif) top left repeat-x; }

As opposed to a 20 px x 600 px image for the same thing. Load time versus browser having less tiles to render.

sonjay

10+ Year Member



 
Msg#: 4076040 posted 2:41 pm on Feb 9, 2010 (gmt 0)

I usually use something at least 20 pixels or so wide -- not because of performance considerations, but because I find it easier to work with in Photoshop, and easier to troubleshoot if the background image isn't showing up, or if it looks wonky.

Can't say I've ever noticed any performance problem either way, though.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved