CSS Tiled Background Images and RAM

Kyle Rush — Mon, 06 Oct 2008 15:41:39 +0000

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.

CSS Tiled Background Images RAM Usage
	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.

Kyle Rush » RAM

CSS Tiled Background Images and RAM