Yes, I ged the two alternatives you are wrestling with now. To
avoid you coming over and thumping me, the pleasure of you being
so honest in the threat being entertainment enough for me, I will
venture forth on the matter with confidence.
It does not matter if there is just one enlarged pic or just a
few on a page, as long as the total loads fast. If you have 4 or
5 pics about 70K, these days, that is fair enough and you would
do this if it is convenient. If a group of pics are related, it
is a good reason, the user just can scroll, he or she will
probably be looking at the first one while others load.
There is *no firm rule* on this and it depends: in your case, I
noticed that one of your pics was over 200k. If you are going to
prepare pics that big in file size, then that is an argument for
not many, maybe just one on a page. That said, all the others
look reasonable and I note you have improved in image preparation
from years back.
If you have a lot of related enlargements, consider making them
not quite so large in px size (which brings down the file size)
for the benefit of them being together on a page. Try not to have
a whole MB on a page (as you do), that is getting a bit big but
perhaps I am old fashioned.
If big is very important, you can make each normal 350 to 600px
enlargement a link to an even larger. No messing about: just make
a folder called "biggest" and stick in your 800 to 1000px wide
versions there on the server and simply link like:
<a href="biggest/lighthouse.jpg" title="see a bigger version
still if you like"><img src="big/lighthouse.jpg" alt=""></a>
No need for any special page for the biggest, the browser will
simply display the pic starting in top left corner. Most people
would likely be satisfied with your 300 to 600px versions, the
*biggest* just being an extra.
Just btw, it is a very handy thing to have the different sizes in
different folders because all the files can have the same names,
a big saving in construction. It is also very handy in how it
ties in with batch image prep. You start with the biggest, and
instruct the image program to make smaller versions and to put
them in a different folder. Not having to worry about the file
names is a big gain, the folder on the server will identify the
thumbs from the normal enlargements from the super sized ones.
3. Do consider - yeah I know, I risk being thumped again - some
handy html/css for pics and captions. There is no point in not
taking advantage of the fabulous inline-block css for creating
flexible pic/captions if you are going to have more than one pic
and caption per page, take advantage of the direction you are
going in. Get with the program as my daughter says!
Something like this is what I have done and it is terrific when
people have big wide screens, they often do not have to scroll.
They send me gifts (anyone want some stuffed Teddy Bears?)
because they are finally getting value from their monitor
investments.
This is roughly how for both thumbnail pages and medium
enlargement pages:
<style type="text/css" media="screen">
div {padding: 0; display: inline-block; margin: 1em 2em 1em 0;}
div div {padding: 0; margin: 0;}
div img {display: block; border: 2px ridge #ccc;}
</style>
<!-- support IE 6/7 -->
<!--[if lt IE 8]>
<style type="text/css">
div {
display: inline;
zoom: 1;
}
</style>
<![endif]-->
<div>
<img src="pics/big/...jpg" alt="">
<div style="width: picWidthpx">Caption...</div>
</div>
<div>
<img src="pics/big/...jpg" alt="">
<div style="width: picWidthpx">Caption...</div>
</div>
<div>
<img src="pics/big/...jpg" alt="">
<div style="width: picWidthpx">Caption...</div>
</div>
There are improvements you can add but this is the basic.