CSS Efficiency Questions [closed]

Question

For the sake of this question, let "efficiency" mean, more-or-less, page rendering speed. Albeit, we should also take into account performance issues, like smooth scrolling.

Let's say you're putting a striped background on a page. From an efficiency standpoint, is it better to tile an image 100px wide (showing ten stripes), or an image 20px wide (showing two stripes)? Of course... a large image takes more time to load, but I feel like I've encountered trouble when tiling very small images. Is there an optimal point?

I'm starting to think this depends on the browser (and maybe the operating system as well?), especially given part two of this question:

To achieve translucency, is it more efficient to tile a translucent .png file, or work with CSS opacity attributes (again, the question of large vs. small tile comes up)? From my experience, older versions of IE seem to behave better with a tiled, translucent .png than they do with CSS opacity attributes (though I've never done any scientific testing).

Rounded corners are another good example... in some browsers, the use of images instead of CSS attributes or JavaScript implementations seems to make the page much faster, with much smoother scrolling.

This is really a question broader than CSS, but it's just something I've been thinking about lately.

-Peter

Chipmunk

It's also a question whether you're developing for the future or the past. – Cannelloni

Absolutely. My question was rather open-ended (and maybe a bit rhetorical), but I think a discussion is worthwhile. – Chipmunk

Answer 1

Yes, this is all OS and browser centric.

For instance, in Safari, it's more efficient to use CSS transformations to animate elements than JS.

In general:

• you want to avoid tiling very small images. A 20px image will tile better than a 1px as the browser is doing a lot less work to repaint the entire screen. Likely not much of a difference between 20px and 100px, though.
• anything that can be done with CSS will likely be more efficient than loading another image. (such as rounded corners, drop shadows, etc.)
• a big caveat is IE's css filters. A lot of those are not efficient and you may be better off reverting to images.

Catcall

Answer 2

Based on my testing, it seems the page renders faster using the smallest image possible, and let CSS do the tiling for itself. The speed at which this takes place is solely dependent on the browser.

As for translucent backgrounds, using CSS would be lighter on bandwidth, but CSS opacity still isn't fully supported, so I would take that into consideration when tackling something like that.

I'd be very curious to know what the results of other people's testing...

Stoicism

Can you provide some numbers? I'm just curious as to how much of a speed difference exists. – Hydrotropism