I am building an image-centric catalog website. It catalogs collectible gaming cards numbering 100,000+ pages. Competitor sites recieve millions of hits each month, so with the possibility of excessive traffic, I need to moderate image bandwidth while also optimizing for image SEO. I'm looking for some tips on doing so.

Each page on the site features one card with appropriate tags and descriptions. There are however four images for each card - one on matte cardstock, one on foil cardstock, one digital, and one digital foil. In a world with unlimited bandwidth and no-wait page loads, I'd simply embed all four images on the main product page with titles, alt tags, and captions to rank them according to their version keyword. In reality a javascript gallery image loader seems appropriate.

Here is a simplified example of my current code. Would this affect SEO in any way? Should I be doing anything differently? Note that I don't want to create a page for each image as I'd have to duplicate the card tags and descriptions on each one, diluting PR for the main page. Thanks for any insight!

<script type="text/javascript">
    document.write('
    <img src="thumbnail1.jpg" data-src="version1.jpg">
    <img src="thumbnail2.jpg" data-src="version2.jpg">
    <img src="thumbnail3.jpg" data-src="version3.jpg">
    <img src="thumbnail4.jpg" data-src="version4.jpg">
    ');
</script>
<noscript>
    <img src="version1.jpg">
    <img src="version2.jpg">
    <img src="version3.jpg">
    <img src="version4.jpg">
</noscript>