PDA

View Full Version : How many images is too many?



mlegg
09-08-2012, 04:31 PM
I am working on a special website for a $9 million dollar property. It's an island with a home on it. I have about 70 high resolution images taken by a professional photographer on the island and mansion on it.

I will be making a Flash slideshow and also have a link to a non Flash image gallery.

thanks,
Mike

if this is the wrong forum for this question please move it.

jscheuer1
09-08-2012, 06:15 PM
If the Flash slideshow does an incremental preload it might not be too bad. Even at that, for flash how much resolution do you need? The more bytes you can trim, the more smoothly everything will go. If the property is as expensive as you say, the market would be for/to folks with higher end equipment and higher connection speeds. However, it's inevitable that someone with poorer equipment and/or connection might have a legitimate reason to view the site. With 70 images on one page for a gallery - it's not the resolution so much as the byte load. Consider a gallery of thumbnails that only load and show the larger image when clicked. Image Thumbnail Viewer II (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm) can be configured to do that. Others probably can as well or be made to.

But in the end only so much resolution is useful over the web. If you have huge images with a lot of byte load, these can be made into smaller images with less byte load. You don't want to crush them, but they could probably be brought down to 40 - 80 K each without stepping on them too much. Then make thumbnails of those for the non-flash gallery. The full image could be available via clicking on the 40 - 80 K version, but I would think a notice as to how many bytes they are or some such information should be on the gallery page.

mlegg
09-08-2012, 07:41 PM
I was looking at the Image Thumbnail Viewer II but can I arrange the thumbnails to be spread horizontally, say 6 or 8 images wide approx 10 rows high, rather than vertically?

djr33
09-08-2012, 08:43 PM
An incremental preload (or just loading each image as needed) would work, or I suggest simply splitting it into a few slideshows. Having a single slideshow for that house sounds like a bad idea anyway-- make it a slightly interactive website where you can tour the island, the kitchen, the bedrooms, whatever.

jscheuer1
09-08-2012, 10:11 PM
I was looking at the Image Thumbnail Viewer II but can I arrange the thumbnails to be spread horizontally, say 6 or 8 images wide approx 10 rows high, rather than vertically?

The thumbnails and the 'loadarea' may be laid out however you see fit. That part is just HTML coding. And if Thumbnail Viewer II is configured as I suggested to only load each larger image upon request (upon click of its triggering thumbnail), with small in byte size thumbnails, all 70 images could be on one page. You could even group them - say 7 groups of 10 thumbs. Each group could have its own 'loadarea' or share a common one.

As for the Flash slideshow, Daniel has some good ideas. I have seen some of these Flash slideshows where each image is incrementally preloaded. If you have one like that, there's virtually no limit to the number of images. You should still try to keep each individual image of a reasonable byte size. That also applies to the larger images used in the Thumbnail Viewer II gallery. Think about that part like so - These professional images are probably high enough resolution to be printed and make a good 8 foot by 10 foot image that could dominate a wall of an office or reception area. You don't need all that for the web, though you could still use a relatively high resolution image for each one.

mlegg
09-08-2012, 10:47 PM
thanks for your thought!

mlegg
09-08-2012, 11:34 PM
An incremental preload (or just loading each image as needed) would work, or I suggest simply splitting it into a few slideshows. Having a single slideshow for that house sounds like a bad idea anyway-- make it a slightly interactive website where you can tour the island, the kitchen, the bedrooms, whatever.

I must have skipped over that part. So instead of a single slideshow are you suggesting making 4 or more based on breaking down the parts (island, the kitchen, the bedrooms, whatever)? I was thinking of doing that for image galleries broken up like that too.

This is the most expensive property I have done for sure, I've searched Google for high end propertied and have come up with some very bland websites. I think mine are much better even for my lower end sites.

I found this lightbox script: http://projects.nickstakenburg.com/lightview
What do you think of that?

djr33
09-09-2012, 01:28 AM
Sure, that script seems fine (but it looks about the same to me as other "lightbox" scripts-- I don't get the popularity of all of the versions!).

Yes, if you want, it might just be easier to have a few different slideshows. And it would be easier/clearer to navigate anyway. You don't want to force customers through 50 images just to get to the 10 of the kitchen, or whatever aspect of the house they want to inspect most closely.

mlegg
09-09-2012, 03:00 AM
Sure, that script seems fine (but it looks about the same to me as other "lightbox" scripts-- I don't get the popularity of all of the versions!).
I know, I don't really see much difference in them. Is Lightbox image viewer 2.03a (http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm) the latest version from DD?

Yes, if you want, it might just be easier to have a few different slideshows. And it would be easier/clearer to navigate anyway. You don't want to force customers through 50 images just to get to the 10 of the kitchen, or whatever aspect of the house they want to inspect most closely.
I think I am going to use some sort of the Animated Collapsible DIV to break them up into categories. I will test the page before it "goes live" to the public.

jscheuer1
09-09-2012, 04:24 AM
Oh Gawd, don't use Lightbox 2.03a! It's outdated, still uses the bloated prototype/scriptaculous libraries instead of jQuery and was never all that great except for that link feature DD added. That one you linked to looks much better, as is the current Lightbox version 2.51 I think it is. There are other box type scripts, some of which are good as well, more flexible than the official version.

mlegg
09-09-2012, 03:00 PM
Oh Gawd, don't use Lightbox 2.03a! It's outdated, still uses the bloated prototype/scriptaculous libraries instead of jQuery and was never all that great except for that link feature DD added. That one you linked to looks much better, as is the current Lightbox version 2.51 I think it is. There are other box type scripts, some of which are good as well, more flexible than the official version.

OK thanks. What do you think about me using the Animated Collapsible DIVs? or would it be better to just have in my menu/navigation bar some drop down menus for the various features and have them on separate sub pages?

jscheuer1
09-09-2012, 03:43 PM
A problem with most of these box scripts is that they use some hover in css and/or javascript which doesn't necessarily translate well on mobile and other touch devices. In fact, at least one such box script - Slimbox 2, specifically tests for these devices and does not initialize if they're detected. That approach can work out though, the link then takes you to the larger image.

I suggested Image Thumbnail Viewer II in part because if configured as I suggested it works off of click, which is supported in those devices. I haven't tested that theory though. I mean I know it works off of click. I'm just not sure if those devices work well with the script. They should. I have a mod of it BTW which transitions each larger image in over the previous, rather than blanking out each time before transitioning in the new content:

4720

The width and height of the loadarea(s) should be set in style to the maximum width and the maximum height of the larger images to be shown in them. There are a couple of extra options available. And style should be set for loadarea images to display: block; margin: 0 auto;

Anyways, Animated Collapsible Divs have a potential issue. If what you're concealing within them needs to calculate dimensions as the page is loaded or onload, those calculations will fail because the unseen material is display: none; which prevents browsers from parsing dimensions. That can be changed by editing the script though. Another drawback is that even if the material in the collapsible divisions is hidden, it still has to load, so using that script doesn't help the byte load of the page. If used with Image Thumbnail Viewer II though, it should work out because Image Thumbnail Viewer II (if configured as I suggested) doesn't need dimensions of the sort I just mentioned and wouldn't load the larger images until requested.

At some point though, you just have to storyboard your ideas, set up some demos and compare the results and ask specific questions based upon them, providing us with links to them as examples. Discussing them only in the abstract as we have been here could lead to false assumptions and/or overlook serious issues with certain platforms/browsers. We may have already done some of that. No way to tell without setting some of these up to see what's what. I would just caution you that although it should carry some weight at this stage, not to get too attached to 'look and feel' at this point. That generally can be tweaked once the nuts and bolts of functionality are worked out.

mlegg
09-09-2012, 04:25 PM
ok thanks John. I have a template all setup but I cannot legally upload it to the web just yet. As soon as the owner gets signatures I will upload it and then show you the site to see it and get more suggestions and/or help.

mlegg
09-23-2012, 01:01 AM
I used http://gettopup.com/ for my image gallery (http://seacoastisland.com/gallery.html). I think it works pretty well.
thanks to all for your help

jscheuer1
09-23-2012, 01:05 PM
Looks good. I'd optimize those thumbnails though. They're 20 and 30 K each, they don't need to be more than 10.

mlegg
09-23-2012, 02:05 PM
Thanks, I will do that.