Optimal CSS tiled background image size

Question

It has often been pointed out that when processing the background of a web page with a background image, this performance is better with a larger image, which is why it often needs to be cut. For a while I made them 8x8 px or a multiple of 8.

But does anyone have any links to the data that prove that this happens in different browsers, taking the rendering time or processor load at different points of the page rendering?

Answer 1

I would think that in these modern browsers, which you indicated in your comment, there are very few:

IE 8/9 and latest versions of Firefox / Safari / Chome / Opera

However, I heard about an error in IE8 when it comes to an exact 1px * 1px image:

Internet Explorer 8 does not repeat the 1x1 pixel translucent background image correctly when "-ms-filter" is used for any other element on the page for alpha transparency:

 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
and demo: http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/

So 8x8 seems good enough to use. I would be surprised if someone from the Internet took care of this in order to strictly check it.

---

I found this which discusses the subject:
http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html

Be sure to read the comments.

To summarize, I will quote myself a few months ago:

I would suggest that this is very small in modern browsers [IE 8/9 and the latest versions of Firefox / Safari / Chome / Opera] that you indicated in your comment.

Answer 2

In some email clients, the image will not be repeated if the background image is at least 25X25, so I decided that this is my default size.

Answer 3

I do not think that there is an “optimal size”, but the general opinion is that large sizes are better than small ones: see this question , too .