seamless texture size?

[shamai]

I have a 500px square seamless texture to use on my background.
is 500px too big? should I remake it?
what is a good size?
thanks

[Paulie_D]

It’s not strictly the dimensions of the image that are important but rather the file size. Of course, in general, images that are larger in size tend to be larger in file size so there is some correlation.

Also the file type (png, jpg) can affect the file size.

Remember if your backgroud image has be served to the viewer and the larger it is the longer your page will take to load.

For a seamless texture, I wouldn’t go with more than 100px square but it depends on the effect you are trying to achieve.

[Johann]

dimensions do matter though. make a two colored .png that is 100000 x 100000 big… even if it’s just 10kb or something, older computers will shit bricks. that is because images always end up decompressed in memory.

though I doubt it actually matters when talking about 500 x 500 and just one image, it’s just something that can’t hurt to keep in mind.

oh, and if you’re using .png, you want this btw ;)

[chrisburton]

Let’s be honest, why on earth would you need an image that large?

[shamai]

well…. thats how big my pattern was and now if i resize it and re’seam’ it …ugh….
a matter of laziness?

[chrisburton]

I was speaking to @johann, sorry.

[Johann]

that’s totally besides the point of how graphics and rendering work. I’m sure there’s *plenty* of people think a small image file is small in memory… and I just chose huge values to make a point, 5000 x 5000 is noticeable as well.

besides, one website might be one tab out of 50. that one background image might be one out of 50, too. so why not have a clue? it’s simply about the mechanics of the thing and common misconceptions.

[chrisburton]

@shamai Maybe it does come down to laziness. Would you be kind to show us your pattern? Perhaps we or I could help you find easier ways to create patterns that need to tile.

[shamai]

either ill keep it or ill try to remake it myself…
the pattern i used is a beautiful fabric pattern found as part of this pack:
http://tileabl.es/packs/pack-4-fabric
they come at 500px

I’m using number 12. when my website goes up ill show you how i used it…

[chrisburton]

I’m sorry, number 12? There only seems to be 10 there. Upload the pattern somewhere and perhaps I can help you.

[Mottie]

@ChristopherBurton if you download the pack, there are 20 number patterns ;) – here is number 12.

[chrisburton]

Thanks, @Mottie. I didn’t want to download that onto my computer.

[chrisburton]

Right. So this texture is really time consuming to shrink and tile. What I did for you was optimize the image to significantly reduce the file size. This should load pretty quickly. http://jsfiddle.net/K8p8w/embedded/result

[Ketan]

It’s depends on texture design, if its repeated with some pixels then tale small size of texture(means if your texture design repeated with 50px so you would take 50px wide texture).

Reg. your texture size, its too big.

Thanks

[amcpherson]

I would like to mention http://www.csstextures.com as a great place to download seamless css textures.

[Author]

Posts