View Full Version : One page Site with lots of Photos, How?

Apr 23rd, 2010, 04:44 AM
I'm learning HTML and CSS at the moment but I'm really new to all this so sorry for my ignorance.

I know a site with lots of photos will be very slow to download. But my friend wants a one page site with about 10 or 15 travel photos at various sizes and angles, overlapping. The photos sizes are between 500k and 2MB, huge.

2 questions:
1) I have Photoshop so I can optimize them but will that be enough to create a page that downloads in an acceptable time frame. Are there other ways that I can get all these photos on the page, perhaps using CSS or even javascript?

2) How can I make the photos be at angles and overlapping?

Thanks for any help.

Apr 23rd, 2010, 05:17 AM
Provided you optimise the images and they are listed on your page in the order (or approximate order) that they appear on the page, then load time should not be too much of a problem, provided you give the sized (height and width) on each <img> tag.

The simplest (and possibly the only) way to make the photos be at angles is in an image editor (such as Photoshop). It may be possible to rotate images using javascript, but I've never done this and don't know if it is even possible. If it is possible, remember that not all visitors will have javascript turned on.

Two methods of overlapping photos come to mind. Either overlap them in an image editor, or (if they are rotated, make the non photo parts transparent and) use CSS positioning (and possibly z-index) to overlap them.