Blog Background: Take 2

I've been noticing that my blog background takes some time to load. Not surprising since it is quite a large file, as the image itself is quite huge (2000px x 1000px).

But it need not be that way. My background is a simple repeating image. I thought I needed it that big so it would scale to the size of the window, but upon further thought, I believed I could achieve the very same look but with a smaller image, and hence reduce load times.

First, I cropped my background image to the smallest repeating pattern, which is this:


Changed the repeat to repeat instead of repeat y (or just removing this would work too as the default is repeat x and y), changed to scroll instead of fixed (or just remove as again the default is scroll), and played around with the size until I thought the pattern looked right (not too big and not too small). That number ended up being 3%.

And just like that I went from a file size 641kb to 12.5kb and got the same look!