Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Fast Loading Time For Image

    I know that there are many scripts (Jquery and Javascript) and CSS tricks that allow an image as a background to scale with the browser.

    There's this one website that I find a very good example of what I would like to achieve, which is below:
    http://g2geogeske.com/

    I wanted to know on this website how they are able to have a huge image file like this website has download in 3 seconds or less?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,996
    Thanks
    15
    Thanked 233 Times in 233 Posts
    Crafty, they are. Look at the very bottom of the page source for a div named backgroundimage. It's really the foreground image of a td. Many of the foreground images over it are actually the backgrounds of other divs. Clever use of z-index to make a foreground act like a background and load quickly.

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah that is really crafty of them! My question is why is it that when they used the image as a foreground of a td it loads faster?

    So if I wanted to use this for a website that I create, all I have to do is do what they did below and copy some of the CSS from their style sheet? I wanted to be able to use the full image without "cropping it", meaning I don't want to expand the picture any more than 100% instead of like how they have it, 200%.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,996
    Thanks
    15
    Thanked 233 Times in 233 Posts
    I'm sure that one reason it loads so fast is that it has 1/4 the area and file size that a 100% image would.

  • #5
    New Coder
    Join Date
    Oct 2010
    Location
    India
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the image is 277.93 KB size.
    compared to the the size in pixels it is very small.
    so the real trick is on the image. it is a highly optimized image.


  •  

    Posting Permissions

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