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.
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.
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.
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.
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.
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.