Designing an image heavy site

I am designing a site and want to use the images of the properties to have the main visual impact,
I have done a mock-up of the property list page

My last 3 attempts of building the site has resulted in a sub standard site that is very slow and not user friendly, this has been because I have tried to built it within the constraints of joomla and a booking component and more importantly my limited knowledge,
This time I am having the site built from scratch, so the functionality and speed should be right:)

but they will only implement my design:D
95% of our competitors use a much smaller images, most only thumbnails, so obviously this is for a reason

as i have got this wrong 3 times already I have to get it right this time :x
So my reasoning is
most don’t have the quality of images available,
They are listing thousands where we only have 200 and when filtered down may only show 10 or so, our clients wont be trawling through hundreds,
broadband speeds have changed a lot, 76% have it and probably 95% of my target audience have it,
I will get them to just load the first 2 or 3 images then the rest appear with live scrolling, same for the slideshow with background loading,

Am I missing anything obvious?
Is there anything I should be making sure is done?

more pages from the mock-up if you can see any design flaws I would appreciate your feedback

It’s easy to assume that everyone you are targeting your website at has high-speed internet access and state of the art computers … but harder to justify that assumption. Particularly with the rise of mobile internet, more and more people are using mobile phones or tablets as their primary means of accessing the web … and you can’t rely on them having a great connection or great processing power. An site with lots of large images is going to be a real pain for them, so you may want to have separate versions of the page aimed at low-bandwidth connections and/or small devices, optimised for those media, rather than relying on the devices and browsers to try to cope with multiple megabytes that are too large for the display being thrust at them (or alternatively, waiting for ages while they trickle through the slow connection). Similarly, the sort of Javascript that partially loads a page and then progressively pulls in more images as you go through can bring a mobile device to its knees and render a page completely unusable.

The mobile aspect is a very valid point, and one I have been trying to get my head around,

I have specified that the site must work on all devices, but I need to make sure that its not the same image just displayed smaller, and that different images are used for different media sizes, If I drop the full screen option of the slideshow then I can get away with optimizing the images more, maybe around 150/170k per image and they still look stunning,

also i am trying to consider that the resolution on tablets and mobiles in increasing rapidly, my nexus is about 1200 wide and my iphone 4 is about 1000 in landscape mode, some mobiles have even bigger resolution, I know this is not the same as a pc because of the physical size, but i still need a 600px image if i want it to fill the width of my iphone vertically and 900 horizontally

for me this is the base of the site, everything else is just fill,
The images sell the holidays so I have to present them in the best possible light, but not at the expense of the customer site experience.

I suppose it is impossible to design a site that uses images as its primary focal point to be optimized for everybody,
If I go for the lowest denominator then the site will look drab, I wont be utilizing a good asset of the site and by far the majority of the visitors will come away with a less than satisfactory experience,
If I go for the highest then 30/40% who are on slow connections or mobile will suffer and just leave the site,
so I suppose its getting the highest percentage whilst keeping the best experience, I did start with the images the full width of the site, I reduced them for this reason, I have tried reducing further but it lost a lot of the impact,

Yeah, clients sometimes forget about the media and method.

You may need to do some device sniffing/media queries, for example an 1800px wide BG is just unjustifiable for anything else than a desktop/laptop anyway.

also consider your image formats. I cant tell from the mock up, but I hope you aren’t relying on transparent PNGs for anything large ( that fade is a fade to a color not to transparent, right? The umbrella is on BOTH images, as opposed to one large transparent PNG), if not some creative slicing and absolute positioning could help.

The great thing is that with media queries and multiple stylesheets, you don’t have to limit yourself in that way! You can adapt the presentation of the page to the device, so that anyone with a large screen gets the full size images, anyone with a medium sized screen gets small images (which you can optimise for that size, rather than simply scaling the originals to 50%), and anyone with a small screen gets minimal images and a plainer layout. This gives the best of all worlds!

I have a few image heavy sites and they load fine. Just reduce their quality enough. Like down to 40% to 50% usually renders just fine without loosing any naked eye quality.

The problem with this design is that anyone with low speed internet is going to leave before they get to see most of it. The average internet surfer will leave a page that doesnt load after 10 to 15 seconds tops.

The main problem with this site is very heavy. If anybody who has slow speed he will click on the site, site will take time than he can’t wait to open completely he will left. So better make site low

I think we are all happy with the responses and this thread has run it’s course.
Thanks everyone :slight_smile: