浏览器中的图像表现为背景重复CSS

Question

Does any one know which is going to be better for a browser loading time between these two options:

background-image:url('1by1px.png');

or

background-image:url('10by10px.png');

A 1px by 1px semi transparent png repeated for the div. Or a larger one say 10px by 10px.

There must be some kind of looping that has to be done to display the repeated image in the browser, and so I wondered if the image which is 1px by 1px causes alot of looping to get the image displayed that it may in fact be less speedy than a larger dimensioned image with less looping?

Of course the counter argument is image size is smaller for 1by1 compared to 10by10, but doesn't mean its better to be smaller because looping many times might not scale as good as looping a large image size slightly less often.

Does any know more about which would be better and how browsers handle situations like this?

Answer 1

When not repeating the background image, the time required to render depends on only the final scaled image, not the original one.

The image in a file is compressed as PNG format, but after being loaded by browser, it is in RGBA bitmap format (4 bytes for a pixel). When repeating a background, (let say on Intel x86), the native code of browser would use REP MOVSD to move the bitmap data from RAM to video memory (this is standard sequence, might be different on various implementations of graphics driver or specific GPU).

Assume that the dimensions of the HTML DIV which contains the background would be 100x100.

For the only-1 pixel image: the browser programme has to exec 10 thousand 'REP MOVSD' instructions.

For the 10x10 image: with each repeated image, the browser programme has to exec 'REP MOVSD' only 10 times (1 time calling to 'REP MOVSD' can render 1 pixel line (pixel row) of the image). So in this case, the number of 'REP MOVSD' instructions executed would be only 10x100 times (10 times in 1 image, 100 repeated images). This takes totally 1 thousand 'REP MOVSD' .

Therefore, the final background based on the bigger image would be rendered faster .

More notes: The above explanation doesn't mean the performance is exactly 10 times better for the 10x10 image. A 'REP MOVSD' (with CX=9999 for example) is only 1 single CPU instruction but still requires 9999x4 bytes to be transfered through data bus. If using 9999 simple 'MOV's, that much of data still have to go thru' data bus, however, CPU has to execute 9998 instructions more. A more clever browser would create a pre-rendered bitmap for the background with replicated images; so each time it needs to transfer to video memory, it needs just only 100 'REP MOVSD' (100 is the number of pixel rows in the final background, assumed above) instead of 10 thousand or 1 thousand.

Answer 2

I agree with Paul answer. I did few rough test with Google Chrome developer tool recently. I used different size of semi-transparent png images on top of a background image and use page paint time to see how long do it take to refresh the screen.

Here is the result:

Time to refresh without -webkit-transform hack (rounded):

2x2 image : 65-160ms

10x10 image : 60-150ms

100x100 image : 55-135ms

1000x1000 image : 55-130ms

Time to refresh with -webkit-transform hack (rounded):

2x2 image : 40-120ms

10x10 image : 30-90ms

100x100 image : 30-90ms

1000x1000 image : 30-90ms

Just like what Paul said, bigger image is take shorter time to load(refresh), than smaller image. But, it seem it is getting less effective after the image getting bigger than 10px. I don't see much difference between 100x100 and 1000x1000.

In my opinion, an huge image won't give you a noticeable result, and it might increase the loading time. So, I think any size around 10 - 100 is good enough for performance and loading time.

But still, different image might have different result, I think you should test your site with page paint time tool in Google Chrome developer tool for accurate result.