2

I have a repeating horizontal pattern in a background layer in HTML. I could do it with either a 1 pixel-wide image or a multiple of that (10, 20, 50...).

The question is:

Which is better?

  1. use a thin (small filesize) image and make it repeat a lot
  2. use a larger image that would repeat itself less

How much does repeating a given image pattern consume in terms of processor/client resources? Suppose the image is 3,000 pixels high.

EDIT:

Is it better to have a 1x3000 image repeat itself 1000 times horizontally (in a 1024-wide screen) than a 100x3000 image repeat itself 10 times horizontally? Is it a given that computers are significantly more powerful nowadays, this tile repetition is less of a concern?

EDIT 2:

very similar question with the answer I was looking for here:

Repeating website background image - size vs speed

Community
  • 1
  • 1
mga
  • 1,960
  • 1
  • 23
  • 31

5 Answers5

2

I often follow the "The smaller the image the better" philosophy. The smaller the size the less time the browser takes to load it. However 1x1 and 10x10 really wont make much of a difference in terms of resources.

vmex151
  • 180
  • 5
  • 1
    I'd go for a somewhat larger image (unless this has a serious impact on file size): http://stackoverflow.com/questions/1530299/repeating-website-background-image-size-vs-speed – ptriek Dec 19 '11 at 17:13
  • excellent @ptriek that is exactly what I was looking for but couldn't manage to produce a set of keywords in the search that would result in that question popping up – mga Dec 19 '11 at 19:14
  • @ptriek create an answer pointing to the url or something so i can accept that – mga Dec 22 '11 at 03:55
1

I'd go for a somewhat larger image (unless this has a serious impact on file size):

Repeating website background image - size vs speed

Community
  • 1
  • 1
ptriek
  • 9,040
  • 5
  • 31
  • 29
0

If one-pixel image suits your need, then that's better, because it consumes less time to download.

Alireza
  • 6,497
  • 13
  • 59
  • 132
  • so you prefer to have a 1x3000 image repeat itself 1000 times horizontally than a 100x3000 image repeat itself 10 times horizontally? – mga Dec 19 '11 at 19:10
  • yes, because if there some overhead it will be pushed for the client not the server, and that's why. – Alireza Dec 20 '11 at 03:13
0

see, the smaller image will take less time to download from the server than the larger image. The Image repeating speed depends on the user's computer and you don't have to worry about it.

Therefore you should use small image which takes less time to download ( or in other words loads quickly ). Once the image gets downloaded on the user's computer, it depends on the computer how fast it will process the image.

Abhishek Biswal
  • 450
  • 5
  • 18
  • So this is a tradeoff between download time (once) and how busy the user's computer will be redrawing the background on subsequent redraws or scrollings. – Mr Lister Dec 19 '11 at 18:15
  • @Mr Lister: exactly... the question being where the tradeoff stops being for "small tile"... like some sort of correlation between tile size and viewport size. – mga Dec 19 '11 at 19:08
0

Smaller the better, the graphic is loaded once, and done.