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

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.