Optimum size of CSS tiled background-images
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 need开发者_运维百科ing 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?
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.
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.
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.
精彩评论