What is the preferred approach for using dual images (fast-loading thumbnails and full-sized photos)?

Question

As my posterous/twitter photo blog is reportedly going the way of the PC at the end of the month, I'm going to create my own. I don't want the page to take aeons to load, so I want to use small (in file size) images for the thumbnails but then, when a visitor clicks on it to view it full-size, show the "real" image (full-size, both from a screen dimension perspective and as to its file size), in a sort of reverse bait-and-switch.

So I reckon I'll need subfolders like:

Project
    Images
        Thumbnails
        Fullsize

I imagine something like this is done a lot. Is there an accepted/"received" way to "minify" the images to use as thumbnails (some webby type tool), or will I have to save each photo at a smaller size, one by one?

Answer 1

My answer would seem to be the Lightbox jQuery plugin:

http://leandrovieira.com/projects/jquery/lightbox/

http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

Also, for automating the creation of thumbnails, see Irfanview's Thumbnail Viewer. See http://www.irfanview.com/ and http://dev.fyicenter.com/Interview-Questions/HTML/How_do_I_make_a_thumbnail_for_my_image_s_.html