Small and Large Image (when repeating)

Question

I am making a panel (e.g. hr) that will span a webpage. Out of curiosity, would it not be the best way to create the smallest image that can be repeated along the X axis, or would it be better to make the image half-wide already so that it does not repeat too many times?

Answer 1

I would make the bar as small as possible. Downloading takes longer than usual. In the modern world, it does not matter. If you want to make the render faster, I would use something around 100 pixels wide or so. In any case, it does not really matter for the speed of the modern Internet and processor.

Use a border if you can avoid images.

Answer 2

My guess is that the speed issue will be http requests, not the number of times the image is reused. If it is a smaller image, download less and view faster.

With that said, if you want to replicate <hr/> try using div and border with outset/inset ;

Answer 3

I am looking for a link for backup, but I read that 10x10 or 20x20 is preferable to 1x1, because the size of the HTTP response block will lead to approximately the same download time, and a larger image will accelerate for the browser.