SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to load a large background image

    Haven't done a web design for a long time and just getting back into it again.

    I have a query about background images.

    I am working on a new design for an existing website and i'm going to make the layout using photoshop and then cut out the parts i need.

    The background image is 1024x1050px and is 1.7Mb

    What i want to know is what is the best way to load this image. Having the image in 1 file could take a few seconds to download. Would it be better to cut the image up into maybe 9 square pieces and then have a 3x3 grid using divs each with a separate image?

    I haven't really done much with photoshop layouts and some of the ones i've seen look really nice but trying to get my head around structuring them is confusing.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by AdRock952 View Post
    The background image is 1024x1050px and is 1.7Mb
    That is WAY too big. It will take far too long to download. Your image should be absolute max about 300kb, but preferably under 100kb.

    Firstly, make sure to use the Save for Web function in Ps or similar. Use just one image.

    But, also ask yourself how wide and tall the image needs to be. If it's like a gradient or simple, repeating pattern, you can cut it way down and make a small slice of it repeat across the page. Feel free to post the image if you aren't sure.

  3. #3
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is exactly what i thought.

    I'm following a tutorial to create a photoshop website layout with my own changes and the background image isn't a gradient or anything i can repeat.

    It's a paper texture so it can't be repeated easily without it looking awful.

    I did what you suggested and forgot about "Save to Web". Got it down to 282 Kb with a JPEG which is better. PNG was still nearly 1Mb.

    The file is the original so it wasn't scaled down in file size.

    I'll see what it look like later and decide whether to use it or not.

    Many thanks for reminding me what I already knew but forgot.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    It's a paper texture so it can't be repeated easily without it looking awful.
    Most sites that use paper texture backgrounds manage to use a tile (maybe not for the top or the edges if they are one-offs).
    Gimp has a "make into a pattern" tool, so surely Photohop has that too.

    If the image has more than 256 colours, you'll think twice about saving as PNG, simply because it's lossless. If it were under that number you could index it and have a smaller 8-bit PNG compared to jpg, but jpg's being lossy are usually smaller for textured and photographic images. You could play more with the jpg quality, while keeping a png of the original (since every time you save the jpg you lose a lot of data), until you see the worst quality you're willing to put up with, to lower the filesize. You should also have an option like remove comments, EXIF data, etc. Why have the file bloat with all that junk?

    What i want to know is what is the best way to load this image. Having the image in 1 file could take a few seconds to download. Would it be better to cut the image up into maybe 9 square pieces and then have a 3x3 grid using divs each with a separate image?
    So you know, you'll always have slower reaction with multiple files over one file, since each file needs to spend request time between browser and server.

    There's also Cicada Principle, if you can figure out how to mimic a paper texture with that... looking at the "Koi" example you could maybe do any unique top or edge images you need.
    This does have the disadvantage of multiple files, files with transparency (which are larger than flat files), and doesn't work on older browsers (this uses the CSS3 multiple backgrounds property), but if it means it's the only way to get the background you need and each of the individual files are still relatively tiny... might be worth it.

    A single 100kb image will load faster than 10 10kb images

    but a single 100kb image could (depending on client bandwidth or your server speed) be slower than 3 files of 10kb each. So I'd only even think of multiple images when the total filesize is also much smaller than your single image, to make up for those extra server requests.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,740
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    You can still use the Cicada principle with multiple containers, this of course means adding non semantic tags, but if it means saving 900K.. am sure no one will mind 3 or 4 extra divs...

    future note... if your image is richly textured use JPG ( saved for web) the more "grain" the image has the lower the quality you can use w/o showing artifacts.

    If your image is flat... (obviously not the case in this instance, but i thought i would mention it), use PNG8, or GIF ( PNG8 has better compression)

    if your image NEEDS multiple levels of transparency and you don't mind using an alpha loader for IE... THEN is when you want to use PNG24.


    as with anything with the web, there will be individual case exceptions, but those are the general rules of thumb.


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
  •