SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    California
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small or large repeating background images?

    When you want to have a repeating background image, is it better to use a small image (like 10x10) or a large image (like 400x400?) My assumption is that it would be better to use as small an image as possible since it would take less time to download. That assumption was reinforced when I recently downloaded some sample code from an HTML/CSS book and it used a repeating GIF that was 1x80 -- the smallest size possible for its intended use.


    I came across this problem while working on a personal site for fun. I made the background in Photoshop at dimensions of 100x100 and repeated it in CSS.

    What do you guys do?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Dont let your thinking become so narrow or limited. The best size is the one that works.

    WHEN TILING, make the image 1x1 TILES (not pixels) . Sometimes , however the repeating pattern is so small that its good to use a little bigger image. Keep in mind that data is sent in quantum 'packets'. This means , for example, that 768bytes and 1.5K may take the same amount of time to send since they both fit in the same packet; while 1.6k may take twice as long to send since it requires two packets. So in essence you may not even lose any speed but may the image easier for you to manipulate. [numbers are for illustration purposes only]

    Tho , for obvious reason this doesnt apply to tiles, it's not just the size of an image that matters; you must also take into consideration the number of http requests. When possible it is better to D/L ONE 60K image than 15 4K images.

    hope clear things up for you.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I don't think it matters a lot, since it's only one download in any case, and even the 400 x 400 image is not likely to be a big download. I find the slightly larger version often has better quality, but then you don't want to make it bigger than needed. It used t be recommended that the width/height of a repeating image not be less that around 10px, as some browsers had trouble with repeating something less than that, but I'm not sure if that's still the case with modern browsers. I basically make a bg image as small as possible without losing image quality.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •