Images in browsers performance for background-repeat 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\');

o

Answer 1

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.