2 image sizes, only load smaller until clicked….?

Hello,
My site is a tutorial site that is full of images so I am wondering if this is possible. I already optimize my images for faster load times but only to a small image size. I would like to upload two optimized image versions of the same image, 400 and 800px. One 400px that will load when the page is loaded and a larger 800px file that will only appear in a popup when the image is clicked. I do not want the browser to navigate to the exact url of the larger image. I only want the 400px images to load when the page is served so load times will remain fast but I want the option for those who are interested in seeing the image at a larger size without navigating away from the page.

Here is a link to a non wordpress site that I know does the exact thing I am describing.
http://www.ibuildit.ca/Workshop%20Projects/rebuild-table-saw-1.html

Is this possible with wordpress? If someone could point me in the right direction that would be great.
Thank you.