SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ideas to speed up an image gallery

    Hi everyone,
    I've got a client who has this image gallery, I didn't realize at the time that the pictures were going to be HUGE. Like really really huge and there are a ton of them.

    I need some ideas on how to get this images to load fast. My current thinking is to break the gallery up into a smaller size and pull in each new set of pictures with an ajax callback.

    The HTML is already optimized, no tables and it validates Strict XHTML 1.0 so in terms of the markup, there isn't really anything left there to do.

    Anyone have any suggestions?

    Thanks!
    Joe
    -- Joe C --
    "Do or do not. There is no try..."
    - Yoda

  2. #2
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry,

    Which part of the gallery is being slow?

  3. #3
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the picture load that is slow
    -- Joe C --
    "Do or do not. There is no try..."
    - Yoda

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,253
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Ideally the solution would be to make them less huge while still maintaining quality. Can they be converted to a lower weight image type? Resized? Maybe you can sacrifice a little quality for a net improvement in weight?

    If not then I think the only thing you can do is reduce page weight by reducing the number of images per page.

    Loading the images using AJAX is a good idea. That way the page can load in using image #1 and more images can load in while the user's busy reading other page content. Of course once they get clicking through the images they'll eventually catch up with the loading and still need to wait, but it should help some.

    Anyway, if you optimize the images and keep the number per page reasonable you should be OK for all but the slower dial-up connections.

  5. #5
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChestRockwell View Post
    It's the picture load that is slow
    Which picture load? The one when you're viewing only one picture but in big size? Or the list of picture thumbnails?

    If it's the latter, have you tried measuring the loading time of a static page? I mean your gallery must be generated by some script, just save the HTML code, save it as HTML and compare the loading time of this static HTML with your gallery speed.

  6. #6
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    Ideally the solution would be to make them less huge while still maintaining quality. Can they be converted to a lower weight image type? Resized? Maybe you can sacrifice a little quality for a net improvement in weight?

    If not then I think the only thing you can do is reduce page weight by reducing the number of images per page.

    Loading the images using AJAX is a good idea. That way the page can load in using image #1 and more images can load in while the user's busy reading other page content. Of course once they get clicking through the images they'll eventually catch up with the loading and still need to wait, but it should help some.

    Anyway, if you optimize the images and keep the number per page reasonable you should be OK for all but the slower dial-up connections.
    You're just assuming that the cause for slow speed is a number of big images. However, there can be other options, perhaps slow scripts, database, whatever.

    We don't even know how many images he has on a page and what the average size of an image is.

  7. #7
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, thanks for the responses, I appreciate it. Here is a little more background.

    The site does not have a database and it's really light, no scripts except for the jQuery script I wrote to do the transition between images. Basically, there are 56 images, very very high quality. I've talked to my client about reducing the size/quality and that isn't an option for them. They want the pictures as high quality as humanly possible. They person is a decorative painter so the pictures need to be large to see the detail in their work.

    The gallery page itself loads quick, the problem is I'm trying to preload all the images on the page, so the users have a nice experience clicking through all the images. So the problem is the preload of the images. The page just seems to be loading forever because they are so huge.

    My thinking right now is having 10 thumbs load and preload those 10 larger pictures with the thumbs. Once the user clicks "more" the next 10 thumbs and large pics load.
    -- Joe C --
    "Do or do not. There is no try..."
    - Yoda

  8. #8
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just checked, the average pic size is about 500k
    -- Joe C --
    "Do or do not. There is no try..."
    - Yoda

  9. #9
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChestRockwell View Post
    First, thanks for the responses, I appreciate it. Here is a little more background.

    The site does not have a database and it's really light, no scripts except for the jQuery script I wrote to do the transition between images. Basically, there are 56 images, very very high quality. I've talked to my client about reducing the size/quality and that isn't an option for them. They want the pictures as high quality as humanly possible. They person is a decorative painter so the pictures need to be large to see the detail in their work.

    The gallery page itself loads quick, the problem is I'm trying to preload all the images on the page, so the users have a nice experience clicking through all the images. So the problem is the preload of the images. The page just seems to be loading forever because they are so huge.

    My thinking right now is having 10 thumbs load and preload those 10 larger pictures with the thumbs. Once the user clicks "more" the next 10 thumbs and large pics load.
    Sorry, but you're talking in riddles. Unless you explain how your gallery works in details, we won't be able to identify a performance bottleneck and come up with a solution.

  10. #10
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,253
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    What type are they? If they're jpg maybe converting them to png would help. AFAIK that shouldn't sacrifice quality.

    Maybe you could have one or more versions? I understand wanting full-size top-quality images. But if a visitor has to wait too long that's all moot as they will probably not wait to see them. And even if they do wait the poor experience may instill a negative feeling. You should probably at least offer alternatives for them.

  11. #11
    SitePoint Member oddain's Avatar
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you check if your PC have enough memory if not buy some memory and try again


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
  •