When saving graphics to be placed in your web pages, it is recommended that you use Photoshop's Save for Web option. This will ensure the best quality and smallest download time for each of your ../images.
Save individual graphics from your Photoshop document (.psd) as either .jpg or .gif. These are the two web-friendly image formats that browsers will display. (The .png image format is not recommended as the kilobyte size for .png ../images is inordinately large compared to jpg and gif and can slow the download speed of your pages once they are online.)
When replacing ../images in your template's web page that you have modified it is recommended that you use the same filename and file format as the original image that came with your template. If your modified image is saved with exactly the same filename/file format (and in the same folder) you will not have to make any changes to the html source code - your new image will automatically replace the original in the web page.
As a general rule, .jpgs are best for photos or any graphics that have soft gradients or drop-shadows. The .gif format is best for ../images that have text or solid colors or that require transparent backgrounds.
You access Save for Web from Photoshop's (top menu) File dropdown list:
Click Save for Web and in the window that opens, click the Optimized tab at the upper left:
Press the arrow next to Quality and move the slider to adjust the quality of your image - the higher the number, the better the quality (but the larger the file size).
In the lower left of the window you will see a display of the kilobyte size and estimated download time for the image as you adjust the slider:
Adjusting the number in the Colors field (32 colors pictured here) to heighten or diminish the quality of your .gif image.
As you adjust the number of colors to decide what is the best choice, the lower left will display the kilobyte size:
Then, click Save at the upper right. The "Save Optimized As" window will open. In its upper portion, choose the folder in which to place your graphic(s).
In the lower portion (Fig. 4 below), specify ../images Only (no html code written), Custom settings, and Selected Slices.
Click the Save button and your image(s) are saved and ready to go into your web pages.