Images: ways of reducing website loading time

Discussion in 'HTML & Website Design' started by jj1, Jul 29, 2009.

0
  1. #1
    What is the best way of reducing the website loading time with lots of small images (eg menu buttons, image gallery thumbnails, masthead pics)?

    I am aware of ways of optimising the graphics to reduce the image file size, and making one big image where possible instead of several smaller ones.

    Has anyone any other tips? Eg has anyone tried CSS Sprites and if so is it any good / problem free?
     
    jj1, Jul 29, 2009 IP
  2. hostcoin

    hostcoin Peon

    Messages:
    75
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can implement caching method on your website using Apache .htaccess files on the Apache Web Server. This will reduce site loading time.

    Caching Images for a week as follows.

    <FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
     
    hostcoin, Jul 29, 2009 IP
  3. smivers.com

    smivers.com Peon

    Messages:
    560
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Use tiff images which hold less space to run.
     
    smivers.com, Jul 29, 2009 IP
  4. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #4
    TIFFs? TIFFs can't even be displayed in a browser.
     
    Kerosene, Jul 29, 2009 IP
  5. NoamBarz

    NoamBarz Active Member

    Messages:
    242
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #5
    The best way is to try to set your images as background images using css. That way, your HTML will load and be displayed while your images are being loaded in the background. It worked rather well for me. Also, when possible, try to use jpg images instead of all other formats. Lastly, you could try using either interlaced gifs/ pngs or progressive jpgs - although the file size is a bit bigger, they're supposed to load faster.
     
    NoamBarz, Jul 29, 2009 IP
  6. thr3146

    thr3146 Active Member

    Messages:
    182
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #6
    Hi jj1,

    I use a pre-load script in my css that helps with multiple page loads like this...

    #LoadImages {
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(images/image.gif);
    background-image: url(images/image/jpg);
    background-image: url(images/image/png);
    }

    then call it in your html like this...

    <div id="LoadImages"></div>

    Seems to work good for me after the initial page has been loaded one time and caches for my menu buttons and graphics.

    Hope that helps.
     
    thr3146, Jul 29, 2009 IP