Slow loading with image toggles

[Mark Wilsdorf]

I've built a Web site with a lot of picture toggles. Collapsed, they display a smaller thumbnail (240 px wide), and expanded they display a (usually) 1200 x 900 px. image--all are .PNGs, by the way.

My problem is with the display of the large image when a picture toggle is clicked on. For most images at typical connection speeds it takes from 8 to 12 seconds for the large image to load. That in itself would not be a problem, except that the floating window where the large image is displayed is not displayed at all until the entire image has loaded.

In other words, there's an 8 to 12 second lapse where nothing happens on the screen. So after clicking on a thumbnail, a site visitor will sit there wondering if the page is "frozen". They may even click on another thumbnail or two during the 8 to 12 second lapse, which causes even more confusion when the originally-clicked-on image is displayed.

The conundrum then, is this: (1) If I leave things as is, site visitors are confused by having nothing happen on the screen for a long lapse after clicking on a thumbnail. (2) If I switch to using all large images (displayed small as thumbnails) the floating window and the full size image it contains will display immediately...but the entire page or section toggle will be dreadfully slow loading.

Is there any remedy? One would be if the floating window showed immediately after clicking on a thumbnail. That way, loading of the large image would provide an animation as it filled the floating window from top to bottom.

I'm guessing the current behavior (not displaying the floating window until the large image has loaded) was a code design decision intended so that using image toggles would be kept simple; i.e., the floating window size is determined after loading the image. But couldn't you get that information from the .PNG or .JPG image file header?

Here's a page with lots of examples of the problem: https://www.mcreekag.com/catalog.html

[Tim Green]

Hi Mark,

This isn't normal, and as far as I can see the problem is on your server. I'm only getting a delay of a couple of seconds accessing your site from here in Europe, but it's still unusual and too long. The delay is simply the time the server is taking to serve up the larger version of the image, and it's the same on other pages where there are only a couple of image toggles. It's not related to the number of toggles on the page -- if you click on the same toggle again it loads immediately, because then it's in the browser cache.

There's not a lot that can be done about this because it's pretty clear that it's a server problem. However, I'd still like you to send me a demo project to test out, ideally with the full catalog page and all the images for it. Just select Save As... in the File menu and save as a single-file HMXZ project. Then delete all the unnecessary topics, and also go to Configuration > Common Properties > Misc. and turn off the history feature and purge all the history files to reduce the project size. Then just pack the project and the image files in a zip and send them to support AT ec-software.com (replace the AT with @). There's no need to send the skin -- I can see that you're still using a 3.35 skin version.

[Gerold Krommer]

Hi,

all I can say is that from here (Vienna, Austria) it takes 2-3 seconds from click to display. My Internet connection is ok, but not great. I used Chrome as a browser.

Kind regards,

/Gerold

[Mark Wilsdorf]

Thanks Tim, I'll get a test project to you today.

Mark Wilsdorf

[Tim Green]

Hi Mark,

Thanks for the project. I'm posting my answer here as well, because it may be helpful for others:

The delays you are seeing are a combination of a rather slow server and image files that are unnecessarily large for this purpose. I first compiled your project unchanged and put it on my own remote server. I still get a slight delay loading the toggles the first time, but it is well under a second from my server. So the difference between your server via my Internet connection and my server is about 2 seconds vs. about 0.5 seconds.

Then I had a look at your snippets where you are defining your images and there is a lot you can do to speed things up quite radically.

First of all, you've done some unnecessary work by creating your own preview images for every image. HM does that automatically: You just need to select the large image and its initial display size. HM will then generate the smaller version and do all the necessary linking while compiling. The alternative image option at the bottom is only for if you want a different image as the clickable image -- for example an icon instead of a preview image.

The next issue is that your images are way too big for a catalog like this, especially if they're all being accessed on the same page. Also, you're saving them as lossless PNGs instead of lossy JPGs, which is further bloating the size. I saved the first two images in the Catalog page as 640 x 480 JPEGs at 70% quality (I sent you these with my reply). This reduces their size from nearly 3MB to just over 90KB, and JPEG files load faster.

In addition to this, I went down to Configuration > Publishing > WebHelp > HTML Export Options and changed the image conversion setting from PNG to JPEG at 70%. With the automatic preview images enabled by not setting that image yourself in the toggle dialog, this reduces the size of the preview image from your PNGs to much more manageable JPGs, enabling the page to load faster as well.

The result of this is that the load delay is pretty much no longer noticeable on my server, and the enlarged versions of the images still look fine. This will also reduce your website bandwidth overall.

[Mark Wilsdorf]

Thanks Tim.

I had only posted the entire site to a server in the past couple days (it's plenty fast running on a PC<g>), and was just beginning to look into the file size problem--I knew the full size images were big. But you've told me several things I did not realize.

I guess my main problem is having done a couple other sites which did not make any use of large-file image toggles, so I hadn't needed to be as attentive to bandwidth conservation with them.

As always, I appreciate your excellent help. Looking at my bio. info in the upper right, I see that I've been asking you questions for 13 years!!