问题
It's often stated that when tiling the background of a web page with background-image, that performance is better with an image of larger dimensions due to it needing to be tiled less frequently. For a while I've been making them 8x8 px, or multiples of 8.
But does anyone have links to data that prove this is the case across a range of browsers, taking in rendering times, or CPU load at various points of page rendering?
回答1:
I'd imagine it matters very little in these modern browsers you listed in your comment:
IE 8/9, and latest versions of Firefox/Safari/Chome/Opera
However, I have heard of a bug in IE8 when it comes to an image of exactly the size 1px * 1px:
Internet Explorer 8 doesn't perform the repeat of a 1x1 pixel semi-transparent background image correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
and the demo: http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/
So, 8x8 seems like a good enough size to use. I'd be surprised if anyone on the Internets has cared enough about this to rigorously benchmark it.
I did find this, which discusses the subject:
http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html
Make sure to also read the comments.
To sum it up, I'm going to quote myself from months ago:
I'd imagine it matters very little in [the] modern browsers [IE 8/9, and latest versions of Firefox/Safari/Chome/Opera] you listed in your comment.
回答2:
In some email clients the image won't repeat unless the background image is at least 25X25 so I've settled on that as my default size.
回答3:
I don't think there is an "optimum size," but the general opinion is that larger dimensions are better than small: see this question, and this one too.
来源：https://stackoverflow.com/questions/4932664/optimum-size-of-css-tiled-background-images