I was developing a website the other day that uses several tiled background images defined in its global style sheet and started wondering how that was affecting the visitors RAM. I started out using very small, 5 x 5 pixel semi-transparent .png images as my tile, but started to wonder if it takes more RAM for the browser to tile that tiny image rather than a larger image. It seemed to me that the more the browser has to tile the more RAM it will require. Well, I put it to a test. I created two background tiles of the same, non-web safe color–one 5X5 pixels and the other 100X100 pixels. I defined the tiles as a style in the HTML document itself. Then I created another HTML file and defined a background color with CSS also inside the document.
Below is a table of my findings. I ran my computer in safe mode and started all the browsers without extensions. The column ‘Default’ is the RAM the browser used with no page open. The column ‘No Image’ is the HTML document with the background color defined by a hexadecimal color in the CSS and not a tiled image. The last column (‘Spread’) is the difference between the two background tiles (5X5 RAM – 100X100 RAM = ?). So, positive numbers in the spread mean that the larger tile image used less RAM, while negative numbers mean that the larger tile used more ram.
| Default | 5X5 | 100X100 | No Image | Spread | |
|---|---|---|---|---|---|
| 110,816K | 126,596K | 126,356K | 120,232 | +240K | |
| Firefox 3.0.3 | 32,128K | 34,976K | 34,464K | 34,788K | +330K |
| IE 7.0 | 18,572K | 20,440K | 20,540K | 20,052K | -100K |
| Opera 9.52 | 28,940K | 32,736K | 32,760K | 27,988K | -24K |
| Safari 3.1.2 | 31,176K | 38,444K | 38,592K | 37,404K | +148K |
Results
There is a very good deal of variation across the browsers. Firefox and Safari both use less RAM when tiling larger images while the opposite is true for Internet Explorer and Safari. Overall, we can see that the larger tile uses less RAM. An interesting part of the experiment is the ‘No Image’ column data. As you can see, defining a background color using CSS uses a significantly lower amount of RAM relative to the tiled images. So, if you care about these minor findings, I’d say do everything you can to find a hexadecimal number you can work with for a background image. If you can’t, use as larger image for your background.
I’ve always wondered about this, thanks for putting in the time to figure this out.
I wonder if the the results are the same for patterned backgrounds meant to seamlessly title. Just asking because I assume your background images were simply a solid color, correct?
they were a solid color, but they were "seamlessly" repeated, so there wouldn't be any difference from a tile that has a solid color or one with a pattern, except maybe file size.