SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Preloading images.

    I have a site that I am working on that has very large images.
    what is the best way to preaload them?
    Thx
    D

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Make sure to optimize them first, in something like Photoshop > Save for Web. You shouldn't be offering up large images files on the web. They can have large dimensions without being large files. For example, the image could be 2000px x 2000px and yet be saved at a small file size (like 30–100kb) and still display nicely in a browser. If you are serving up images of more than 100–200kb, you are on the wrong track. So deal with this first before worrying about preloading.
    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."

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hello there.
    I already did the photoshop>saveforweb.
    the main sunrise pic is
    2000x1333 px

    Doc size
    27.778x18.514
    @72px/in

    when I go to save for web & devices, picked teh png-24 option, default is bicubic. size 100%...
    is there anything else I could change to improve on this?
    thx
    D

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    is there anything else I could change to improve on this?
    The resulting file size is the important thing—but you left that detail out.

    The main thing I'd change in those settings is the 100% ... assuming you are talking about "quality". Usually you can set it to 50–60% and not lose much qulaity, yet massively reduce the file size. Indeed, if you make the image huge (like, say, 2000px wide) but then squeeze it into a smaller on-screen area like 1000px width, you get sharp, retina quality display, even if you save the image at around 20% quality and at a very small file size.
    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."

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the advice will go try it out.
    the end size should be big, the same? so it should be a large background. Did I misunderstand that?

  6. #6
    Non-Member
    Join Date
    Jul 2013
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only time (usually) that it can help to preload an image is one that is shown on hover and there is a delay. In which case you can simply put the image at the bottom with display none. If the browser doesn't preload with display none css just position it off screen or other.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    Thank you for the advice will go try it out.
    the end size should be big, the same? so it should be a large background. Did I misunderstand that?
    The dimensions (width/height) are not the issue. The issue is file size ( in terms of kb etc.)
    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."

  8. #8
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    In addition: you can have a look at the article Image saving with gif, png, jpg: which is the best format?

    Once you have the images in the smallest size (in kB), the question "why preload?" is arising. Is it for hover-images, for a javascript-driven image carrousel, etc.? Maybe a "postload" technique can be used, so that the page itself is appearing as fast as possible.

  9. #9
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you all.
    will follow up on all the suggestions.
    As it is the large images are for the backgrounds.

  10. #10
    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)
    In ADDITION to OPTIMIZING your images, you should also consider your image deployment strategy.

    1. Is the image CONTENT? No, then could it be used as a CSS element BG
    2. If the image is a BG, is it tiling. if yes, have I created the SMALLEST tile unit for a seamless pattern?
    3. If it's NOT repeating, can the container be sized to the image? in which case you may benefit from using sprites ( many images in ONE file). a sprite file may or may not be lager than the sum of its parts, but the benefit of FEWER HTTP REQUESTS will make your site load far quicker.


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
  •