Resize and merge images

I have a website that shows about 300 thumbnails of record covers. I need all these thumbnails recreated from their higher resolution versions and saved into one big PNG image file. The website then needs to be adjusted to look like before but instead of loading all the thumbnails again they should just be shown from the large PNG image via positioned correctly via CSS. ## Deliverables The job is for this website: [login to view URL] Please look at it. You'll notice that each thumbnail is loaded from an image. To optimize loading time and for doing a general image cleanup I want to store all these thumbnails in one big file. That file will be a standard PNG image used as container for all the thumbnails. These are the steps required to complete this job: 1) Create a new PNG image in Adobe Photoshop CS4. 2) Load the high resolution version of a record cover. 3) Downsize the image via "Image > Image Size... > Resample Image > Bicubic Sharper (best for reduction) 4) Copy the downsized image as thumbnail to the PNG container 5) Save the PNG container as [login to view URL] to the provided website 6) Adjust the XML and PHP file to load the thumbnail from [login to view URL] via CSS positioning 7) Repeat steps 2-6 until all record covers are stored as thumbnails in the PNG container. As a result of this job the website will look nearly the same as before but all thumbnails are loaded from the same PNG image. The PHP and XML files that need to be edited are attached.