There is a background image defined as a backround-image in css - it weighs 27k. There is a "pattern" that can be set in the same way via css and "propagated" by the background-repeat block. It weighs 113 bytes.

Which option will be faster to boot purely theoretically? In one case, you just need to upload an image of a larger size, in the second one, the image is smaller, but the browser needs to "Multiply" it into a block.

  • one
    Purely theoretically multiplied will be loaded faster, in all senses. But I cannot technically describe the principle of loading a case. - Artem Gorlachev

1 answer 1

Profiling rendering is quite difficult. But this is not necessary. It may well be that there is no difference or it is insignificant.

And if by the word “boot” you mean downloading an image from the server, then there’s definitely a difference that will be minimal. You can easily see this for yourself by looking at timlene in the Google Chrome Brewer Developer Tools.

The repetition method is used less and less often because it can often be replaced with pure CSS3 without using images at all, for example using repeating-linear-gradient as mentioned in comments @Artem Gorlachev

  • It is easy enough to conduct profiling in chrome. And can be an example of the last paragraph? I have something terrible and obviously heavy in terms of rendering seems to be in my head. - Artem Gorlachev
  • one
    Googled, talking about small elements, found repeating-linear-gradient , that's what I asked about) - Artem Gorlachev