I'm in the same business :)

We use a script to allow the user to click through a series of images of each home, rather than trying to load several images at once. Like your "slide show" suggestion.

Yep... thats similar to what I had in mind. I've used slide shows before and some of the earlier ones were veeerry slow, but there are a few around now with acceptable load times.

Are you able to tell from your stats what % of viewers are finding and opening the slide show images?

What about using thumbnails? That way visitors can click on whatever interests them and skip the rest if the important images don't match what the visitor is looking for. It gives them a chance to view more properties in a shorter span of time, too.

I've got several clients in an "image heavy" market sector. I find that it really helps them compete if I make sure we are speedier than the competition. Even though we could never approach 40kb page weight (they often come in around 150 to 200kb) we still do better than the competitors (from 300kb up to insanity). From the clients information gathered at trade shows, they convert at almost twice the rate.

There are tons of tricks that help -- One is to get really good at image optimization. Another, as mentioned, is slide shows (iframes can help you create a GREAT slide show). Pre-loading the most likely big images to be needed is another very helpful technique.

The solution I used on a bed and breakfast site was to put a small (1x2 inches) thumbnail next to each descriptive section, and link that thumbnail to a pop-up window with a larger image. It's a simple javascript that allows you to specify the size of the window to exactly fit the large images.

That way, the client's main page loaded quickly, but anyone who wanted to take the time to view the large images was able to see more detail, without the potential confusion (for net newbies) of having a whole new page open up for each one. Thumbnails are key to any photo heavy site, IMO.

A tip you might not have considered, make sure your server is using mod_gzip.
I've noticed when using mod_gzip on a server I can specify it should
NOT try to recompress the images... the effect is rather nice for
graphics heavy pages, the text appears instantly while the images
fill in... its hard to explain but the human mind seems to tolerate
it much better because you see the placeholders. I realize this is
the normal loading order even without mod_gzip, but the point is the
ratio at how fast all HTML code loads is radically faster and put
way ahead of the loading images, especially for dial-up visitors.

Question is, why isn't Brett using mod_gzip? :)
[leknor.com...]

[edited by: amznVibe at 6:05 am (utc) on Jan. 14, 2003]

Syren_Song..

Thumbnails would do the trick OK ... I just have a natural aversion to them as most are postage sized smudges that are all too often unintelligible. I'd prefer other options.

Tedster...

Thanks for the heads-up on iframes. Looks like some more R&D on the horizon. Talk about multi-skilling! All I need is time to actually do the paying work.

Can you point me at any reference sources for image pre-loading techniques? In doing research on this topic I have seen a few sites that have a "click to enlage" option which delivers a huge image almost instantly... most impressive and I guess that involves preloading.

austtr -

Keep in mind that you're in control of how large or small your thumbnails are.

If you're going to have a click-to-enlarge option, that's going to involve thumbnails!

As mivox suggested, you can make them 1x2 inches. Or you can make them 3x3 inches. The important thing is to have the thumbnails large enough for your visitors to see enough detail to let them know whether they want to see a larger image or not.

If your thumbnails are so tiny there's no detail visible until you enlarge the image, then they're pretty much useless no matter what. ;)

I think one of the most important, and most difficult things to do that can help page load speed, is to use image size attributes. They can be tough to keep maintained and some site software won't include them at all.

I have to agree with every one else that suggested using thumbnails and allowing the visitor decide if they want to see it or now. You can zoom in on a big picture a bit first, and then thumbnail it, so that more of the bulk of the image is retained after downsizing. That tends to keep the clarity there and allow you to go down further than you'd expect.

That's the one place I think popups work well. Pop open a window if they click on the thumbnail and do you mini slidshow from there. If they click, they are expecting graphics and a load wait anyway - might as well give them the full monte.

Thanks to all who responded...this has turned out to be a rewarding post for me. I almost decided against posting it as being "too dumb" to waste people's time with.

I've revisited thumbnails and found my dislike of them was irrational... there are some good thumbnail generators out there now.

I thought iframes were some high tech tool best left to rocket scientists... but they are just a simple little itty bitty line of code that even I could understand.

Ditto for preloading images ... never realised it was as simple as as firing up a script, and there are many to choose from.

As someone much wiser than me once said.... "the only dumb question is the one that you never asked".

If you need a good thumbnail, and your automated procedures aren't producing it for you on a particular image, here's a Photoshop trick. It probably works in Fireworks and others as well, but I haven't tested it.

Reduce you image size in several steps, and always as a jpeg. I find it works the very best when each successive image is no more than 25% smaller.

But BEFORE you reduce the image's size (not after), oversharpen the image a bit. I usually just run Photoshop's Sharpen Edges filter. This builds in extra contrast and stronger edges so the image retains more visible detail when you go smaller.

When you reach the size you want, you may also want to increase color saturation a bit -- this size changing thing tends to rob color richness.

But when you get done, you can have an extremely clear miniature. And it only takes a minute -- two at most. Now that I've got the technique down I can fly through a pile of images in no time. It can probably be programmed as a Photoshop action for batch processing, but I don't have that many images at one time and I like keeping my eye on each one.

After all, a good product image means more money, so it's worth a bit of extra time to me.

A thing I have thought of trying, which could keep page loading time to a minimum AND save people having to open new windows to see pictures is putting the pictures into a Flash file.. (don't burn me - please. I know everyone here hates flash).

I know.. flash isn't as universal as jpegs, etc.. etc. and you need to own a copy. But just say you did own flash, here's my 'trick' that I would possibly use:

Create a slideshow in flash with all your pictures in it.. say 10 pictures.. (you should be able to create a very slick looking one too!).

Make the first frame of the movie one of the pictures. This way it won't take long before something is loaded.. Program a pre-loader sequence in that frame, so that when all the pictures are loaded (or even just the next one), you can click through to see it. While the rest of the flash is loading, you can choose whether to tell your audience it is loading or not.

You should be able to achieve good compression in flash and make for a great looking end product (and when you think about it.. that's what the viewer wants to see!).

Just another alternative I would consider.. I do like standard thumbnails and pop-ups though as well :)

NOTE: I have not actually done this, so don't ask too many specific questions.. although I plan on implementing a similar thing on a site soon!

i have a different approach to images, similar to daamsie’s. i put an image which is larger than a thumbnail (300-400 pixels from the largest side) and along one of the sides i put thumbnails of other photos of the same product shown in the larger image, as brett said, “If they click, they are expecting graphics and a load wait anyway”.
if someone is looking for a widget they will actually buy, he wants to know as much as possible of the item, and that implicates “looking” the widget, so a gallery of the product is a must.

BTW, i don’t know if someone has noted it, or if this is a product of my twisted imagination, but recently, i made a flash cd that was enterilly jpeg’s galleries, the flash is an autorun and it’s full screened. i have just seen that the photos are jaggy (the edges of subjects in the photos look pixelated), i don’t know if this is a problem with flash about handling large photos or really big galleries, or if this is because of the full screen, but the problem is evident. what could it be?

the first being to convince the business owner why we should "hide" the photos of their wonderful property

Just give them a test drive. Make a basic page with several big images and have your client visit this page with a 56K modem. I'm sure he/she will be open to suggestions after waiting several minutes for the page to load.

the second being that most viewers will take one look and bu**** off thinking the site is a waste of time because they can't see any photos

Make thumbnails as previously suggested. Or you can also make links to the photo gallery jump out from the page and grab visitors attention as soon as they enter - You can use mini flash movies (but make sure that it integrates with the rest of the page nicely, text which color, font, size is completely different from the rest of the page.

If big images are essential for your client's business I would suggest even writing an ad copy within your page to sell your customers an entry to the gallery (Take a virtual tour.....). With competition so great in the area of this business you can not afford 10+ seconds load time of your home page. Posting images or big number of thumbnails is out of the question.

One of my clients is a real estate agent. For her home listings pages, I came up with this solution:
1. 2-3 jpeg photos of 400 pixels horizontal (and whatever vertical), very carefully compressed in Photoshop. 300 or 350 pixels might work for you.

The idea is too provide a compromise, with images that are small enough for a reasonable page size, but still have images that are larger than tumbnails. If you need more than 2-3 images, you provide linked pages for each additonal page of 2-3 images.

2. Use an IPix technology '3D Tour' for those who want to see more. These immersive panoramic photos give a very strong feeling of what environments are actually like and give you a big edge over competitors who don't use them, IMO.

Since these are hosted elsewhere, you only need to provide a link, so they don't cost you any page size increase. A little javascript (supplied by your IPix vendor) that you place in your page lets the '3D Tour' popup over your page.

In California, these '3D Tours' cost about US$150 to US$225 for the better technology (see below). They usually include 4-5 scenes and can come with a built in slide show and marketing text.

But be aware of cheap imitation technologies. Don't get a service that takes many photos in a circle and then uses software to 'stitch' them together, for a lower price than true IPix technique. The image quality is usually very poor.

You want the technology where one picture is taken, into a mirrored sphere, which is mathematically flattened out later. This gives high image quality.

Also, be aware that photos of dark rooms with the bright outdoors showing through windows, etc. are always going to create exposure problems. Try to get the owner's cooperation in providing maximum interior lighting or in allowing the photog to bring in lighting (though we never do that, so I have no knowledge of the practical implications of trying to light a 3D scene, without the lighting showing). One possibility would be to replace all exisitng room lamps with much higher wattages during the shoot.

tedster give a very good suggestion on creating high quality tumbnails. I would like to add some of my own ideas that I've experienced:

For better performance, I would suggest resizing by 15%-20%.

Also in addition to the "color robbing" sharpening process degrades your brightess as well. Use brightness/contrast tool after each resize to lighten your image.

If you a realy picky - sharpen one chanel at a time.

Well, I'll go against the general concensus and let you know what I've done. I sell yacht charters and people want to see each part of the yachts, inside and out ... so its very similar to what you are doing.

I have one page which shows an image of the yacht layout, gives a description of the yacht, the equipment list, spec list and pricing details. There is also a link to a photo page which has anywhere up to 10 shots per boat, using 250 X 180 pixel each. One or two may be larger as required.

This works well and I have had no complaints about download time. If they are interested in the layout and the price is right ... then they proceed to the photo page. If not interested, they go back to the yacht list and find something else. By keeping the photo page separate, you don't make them waste a lot of time downloading images they are not interested in.

I just hate having to click on all those pop up images. I want to see all the photos of a yacht or vacation rental in one go ... so that I don't get confussed as to which one has what attributes.

My 2 cents.

I think visitors are much more forgiving and willing to wait for images to load when it's something they are interested in. My wife, who makes the arrangements for our annual family trip to a rented house at the beach, will take hours looking at ALL the pictures she can find of every rental house she is interested in.

One thing to keep in mind is that people like to print pages for comparison, so it is important to have pictures in the info page -- a popup won't work.
I think it is critical to have at least one picture, and maybe offer visitors the choice of seeing another page with all the pictures.

Instead of popup windows, one thing you might want to consider is the CSS display property. Create two classes, one with display set to "none" and one with display set to "block".

<style>
.closed { display: none; }
.open { display: block; }
</style>

Place each large image inside its own div with its own id using the closed class.

<div class="closed" id="patio"><img src="patio.jpg" height="100" width="100"></div>

Then the text link or thumbnail to the image can reference a JavaScript function that toggles the visibility of the larger image.

<a href="JavaScript:expandCollapse('patio')">Show me the patio</a>

<script>
function expandCollapse(id){
if (document.getElementById &&!window.opera) {
var nodeObj = document.getElementById(id);
if (nodeObj.className == 'closed') {
nodeObj.className = 'open'; }
else {
nodeObj.className = 'closed'; } } }
</script>

This way all of the text will download and display quickly while the hidden images download in the background. Hopefully by the time the user as read what is relevent to him and is ready to see the larger image it will have already downloaded.

Another thing I would suggest is to always define an images size. That way the content of your page will not be shifted as the images are being downloaded.

I hope I wasn't too verbose or off topic.

pr10n
--
CSS Display Guide
[w3schools.com...]

But be aware of cheap imitation technologies. Don't get a service that takes many photos in a circle and then uses software to 'stitch' them together, for a lower price than true IPix technique. The image quality is usually very poor.

With all due respect, I couldn't disagree more. Your iPix vendor must have shown you some truly lousy competing technology, because the QuickTime VR walkthroughs (made with stiched panoramas) I've seen had MUCH less distortion than any iPix work (made with two 180º fish-eye images stiched along a vertical axis) I've seen.

QuickTime VR is also in no way an "imitation" of iPix. It is a totally different imaging technique, that, IMO and experience, offers far more accurate image quality. QuickTime VR can also be used to create spinning objects, where the viewer can virtually rotate a small object so as to see all angle of the outside of it.

And iPix CAN be hosted on your own site. The hotel I did the pop-up thumbnails site for also added iPix images in addition to mine, and I was the one who installed them on the site.

That said, iPix is much easier to create, as their automated software does almost all the work for the photographer from what I understand, and iPix walkthroughs can generally be contracted less expensively than a top-notch QuickTime VR version.

But most sites have no need for flashy 3d walthroughs anyhow... if you're worried about load time, I wouldn't bother with either one. ;)

On my site I recently implemented a PHP script called Gallery (you can find it at Hot Scripts). It is an excellent image library script that allows you to have multiple albums (in this case it could be properties). You can also browse an album using a slideshow which adds a professional touch, especially blended transitions.

Thumbnails are all compiled on the server by ImageMagick or NetPBM (most hosts would have at least one of these installed). The best part about using this approach is that you can set options for both the thumbnail and original image dimensions using the admin function of the script. You upload the original (file size say around 100-150k) and then tweak the settings accordingly. Also saves having to upload/manage thumbs and originals.

From a 700k original you should be able to get reasonable quality at around 100k or so, less if you are happy to reduce the pixel dimensions. Once you find a size and compression level you are happy with you can batch process your pics (IrfanView is easy) and away you go ;).

Another quick and easy trick is to have the images load at the bottom of the page while the reader looks through your text etc. above it (apologies if this has already been mentioned in the thread).

With all due respect, I couldn't disagree more. Your iPix vendor must have shown you some truly lousy competing technology, because the QuickTime VR walkthroughs (made with stiched panoramas) I've seen had MUCH less distortion than any iPix work (made with two 180º fish-eye images stiched along a vertical axis) I've seen.

I did not mention QuickTime VR (which is very high quality indeed), because my findings indicated that it is not much used for real estate type '3D Tours', I guess because it is more difficult/expensive/time-consuming than IPix. My belief is that it is used where there is a bigger budget, like products and commercial spaces. Sorry I didn't except QuickTime VR from my post.

Don't know why you assume my experience comes from being sold 'that which is not true' by some sales person.

In fact, my real estate agent client used to use 2 IPix services, but has lately been trying out every cheap service available, going strictly on lowest price. These low price services use neither QuickTime VR, nor Ipix, but some other stitching pan shots technique.

I also did (only 1 hour) a web search for such services for real estate agents and found no QTVR in ou large metro area. And on the web sites, the IPix samples were better that the samples of the non-IPix, non-QTVR types.

The differences are pretty obvious. IPix (or QTVR) show the ceilings, light fixtures and floors. The cheap services have limited up and down coverage. IPix (or QTVR) have decent resolution, the cheap images are fuzzy. And so on...

Let me simplify my message:
1. I think that '3D Tours' are a better way to give prospects a simulation of an environment than are a series of stills. And they can include a slideshow of stills, if you like.
2. To me, they provide a competitive advantage.
3. I believe they simplify your web pages, if hosted off site, with little or no down side (for the better services).
4. I recommend against using the cheapest services.

Ahh... OK. :)

Don't know why you assume my experience comes from being sold 'that which is not true' by some sales person.

Because I've seen quite a few QTVR walkthroughs, and quite a few iPix ones as well, and didn't realize you were excluding QTVR from your statements. My apologies for the misunderstanding.

And I totally agree that the 'virtual walkthrough' idea can give a real estate a definite competitive edge in their online presence, but I don't know that the load times are worth it for a vacation rental.

That said, the iPix equipment s relatively inexpensive, so if a designer does do a significant amount of business in a real-estate or rental market, it would probably be worth getting so you can offer it as an added service to your clients.